1# Statck Layout 2 3The stack layout reserves an area on the screen to display elements in a component and allows the elements to be stacked. 4You can implement a stack layout through the **[\<Stack>](../reference/arkui-ts/ts-container-stack.md)** component, which provides a stack container where child components are successively stacked and the latter one overwrites the previous one. 5 6## Alignment 7 8Child components in the container can be aligned in any of the alignment modes described in the table below. 9 10|Name| Description| Image| 11|---|---|---| 12|TopStart| Top start.|| 13|Top |Horizontally centered on the top.|| 14|TopEnd| Top end.|| 15|Start| Vertically centered start.|| 16|Center| Horizontally and vertically centered.|| 17|End| Vertically centered end.|| 18|BottomStart |Bottom start.|| 19|Bottom| Horizontally centered on the bottom.|| 20|BottomEnd| Bottom end.|| 21 22## Z-order Control 23 24You can use the **[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md)** attribute to set the z-order of a component in the stacking context, 25so as to create a custom stacking order of the child components. A larger **zIndex** value indicates a higher display level. 26 27- In the statck layout, if the size of a component is greater than that of the one before it, the one before it is hidden. 28 29 ```ts 30 Stack({ alignContent: Alignment.BottomStart }) { 31 Column() { 32 Text ('Stacked component 1').textAlign (TextAlign.End).fontSize (20) 33 }.width(100).height(100).backgroundColor(0xffd306) 34 Column() { 35 Text ('Stacked component 2').fontSize (20) 36 }.width(150).height(150).backgroundColor(Color.Pink) 37 Column() { 38 Text ('Stacked component 3').fontSize (20) 39 }.width(200).height(200).backgroundColor(Color.Grey) 40 }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0) 41 ``` 42 43  44 45 In the preceding figure, the size of the stacked component 3 is greater than that of all the components before it. Therefore, the first two components are completely hidden. To show these components, modify their **zIndex** attribute settings. 46 47 ```ts 48 Stack({ alignContent: Alignment.BottomStart }) { 49 Column() { 50 Text ('Stacked component 1').textAlign (TextAlign.End).fontSize (20) 51 }.width(100).height(100).backgroundColor(0xffd306).zIndex(2) 52 Column() { 53 Text ('Stacked component 2').fontSize (20) 54 }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1) 55 Column() { 56 Text ('Stacked component 3').fontSize (20) 57 }.width(200).height(200).backgroundColor(Color.Grey) 58 }.margin({ top: 100 }).width(350).height(350).backgroundColor(0xe0e0e0) 59 ``` 60 61  62
