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