• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# stack
2
3The **\<stack>** component provides a stack container where child components are successively stacked and the latter one overwrites the previous one.
4
5## Required Permissions
6
7None
8
9## Child Components
10
11Supported
12
13## Attributes
14
15Attributes in [Universal Attributes](js-components-common-attributes.md) are supported.
16
17## Styles
18
19Styles in [Universal Styles](js-components-common-styles.md) are supported.
20
21## Events
22
23Events in [Universal Events](js-components-common-events.md) are supported.
24
25## Methods
26
27Methods in [Universal Methods](js-components-common-methods.md) are supported.
28
29## Example
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/* xxx.css */
39.stack-parent {
40  width: 400px;
41  height: 400px;
42  background-color: #ffffff;
43  border-width: 1px;
44  border-style: solid;
45}
46.back-child {
47  width: 300px;
48  height: 300px;
49  background-color: #3f56ea;
50}
51.front-child {
52  width: 100px;
53  height: 100px;
54  background-color: #00bfc9;
55}
56.positioned-child {
57  width: 100px;
58  height: 100px;
59  left: 50px;
60  top: 50px;
61  background-color: #47cc47;
62}
63.bd-radius {
64  border-radius: 16px;
65}
66```
67
68![img](figures/en-us_image_0000001127284958.png)