• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stack<a name="ZH-CN_TOPIC_0000001209570695"></a>
2
3堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
4
5## 权限列表<a name="zh-cn_topic_0000001127125064_section11257113618419"></a>
6
78
9## 子组件<a name="zh-cn_topic_0000001127125064_s2936fc34a22b44aa8389d1ec3de8fa61"></a>
10
11支持。
12
13## 属性<a name="zh-cn_topic_0000001127125064_s7207d4d586504fa3be62558273017fbe"></a>
14
15支持[通用属性](js-components-common-attributes.md)。
16
17## 样式<a name="zh-cn_topic_0000001127125064_section1774719169253"></a>
18
19支持[通用样式](js-components-common-styles.md)。
20
21## 事件<a name="zh-cn_topic_0000001127125064_section1948143416285"></a>
22
23支持[通用事件](js-components-common-events.md)。
24
25## 方法<a name="zh-cn_topic_0000001127125064_section2279124532420"></a>
26
27支持[通用方法](js-components-common-methods.md)。
28
29## 示例<a name="zh-cn_topic_0000001127125064_section18137649112711"></a>
30
31```
32<!-- xxx.hml -->
33<stack class="stack-parent">
34  <div class="back-child bd-radius"></div>
35  <div class="positioned-child bd-radius"></div>
36  <div class="front-child bd-radius"></div>
37</stack>
38```
39
40```
41/* xxx.css */
42.stack-parent {
43  width: 400px;
44  height: 400px;
45  background-color: #ffffff;
46  border-width: 1px;
47  border-style: solid;
48}
49.back-child {
50  width: 300px;
51  height: 300px;
52  background-color: #3f56ea;
53}
54.front-child {
55  width: 100px;
56  height: 100px;
57  background-color: #00bfc9;
58}
59.positioned-child {
60  width: 100px;
61  height: 100px;
62  left: 50px;
63  top: 50px;
64  background-color: #47cc47;
65}
66.bd-radius {
67  border-radius: 16px;
68}
69```
70
71![](figures/zh-cn_image_0000001166441636.png)
72
73