1# stack
2
3>  **NOTE**
4>
5>  This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **Stack** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
8
9## Required Permissions
10
11None
12
13
14## Child Components
15
16Supported
17
18
19## Attributes
20
21The [universal attributes](js-components-common-attributes.md) are supported.
22
23
24## Styles
25
26The [universal styles](js-components-common-styles.md) are supported.
27
28
29## Events
30
31The [universal events](js-components-common-events.md) are supported.
32
33## Methods
34
35The [universal methods](js-components-common-methods.md) are supported.
36
37
38## Example
39
40```html
41<!-- xxx.hml -->
42<stack class="stack-parent">
43  <div class="back-child bd-radius"></div>
44  <div class="positioned-child bd-radius"></div>
45  <div class="front-child bd-radius"></div>
46</stack>
47```
48
49```css
50/* xxx.css */
51.stack-parent {
52  width: 400px;
53  height: 400px;
54  background-color: #ffffff;
55  border-width: 1px;
56  border-style: solid;
57}
58.back-child {
59  width: 300px;
60  height: 300px;
61  background-color: #3f56ea;
62}
63.front-child {
64  width: 100px;
65  height: 100px;
66  background-color: #00bfc9;
67}
68.positioned-child {
69  width: 100px;
70  height: 100px;
71  left: 50px;
72  top: 50px;
73  background-color: #47cc47;
74}
75.bd-radius {
76  border-radius: 16px;
77}
78```
79
80![en-us_image_0000001127284958](figures/en-us_image_0000001127284958.png)
81