1# 层叠布局 2 3层叠布局（StackLayout）用于在屏幕上预留一块区域来显示组件中的元素，提供元素可以重叠的布局。 4通过层叠容器[Stack](../reference/arkui-ts/ts-container-stack.md)实现，容器中的子元素依次入栈，后一个子元素覆盖前一个子元素显示。 5 6## 对齐方式 7 8设置子元素在容器内的对齐方式。支持左上，上中，右上，左，中，右，右下，中下，右下九种对齐方式，如下表所示： 9 10|名称| 描述| 图示 | 11|---| ---|---| 12|TopStart| 顶部起始端 || 13Top |顶部横向居中 || 14TopEnd| 顶部尾端 || 15Start| 起始端纵向居中 || 16Center| 横向和纵向居中 || 17End| 尾端纵向居中 || 18BottomStart |底部起始端 || 19Bottom| 底部横向居中 || 20BottomEnd| 底部尾端 || 21 22## Z序控制 23 24Stack容器中兄弟组件显示层级关系可以通过[zIndex](../reference/arkui-ts/ts-universal-attributes-z-order.md) 25属性改变。zIndex值越大，显示层级越高，即zIndex值大的组件会覆盖在zIndex值小的组件上方。 26 27- 在层叠布局中，如果后面子元素尺寸大于前面子元素尺寸，则前面子元素完全隐藏。 28 29 ```ts 30 Stack({ alignContent: Alignment.BottomStart }) { 31 Column() { 32 Text('Stack子元素1').textAlign(TextAlign.End).fontSize(20) 33 }.width(100).height(100).backgroundColor(0xffd306) 34 Column() { 35 Text('Stack子元素2').fontSize(20) 36 }.width(150).height(150).backgroundColor(Color.Pink) 37 Column() { 38 Text('Stack子元素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 上图中，最后的子元素3的尺寸大于前面的所有子元素，所以，前面两个元素完全隐藏。改变子元素1，子元素2的zIndex属性后，可以将元素展示出来。 46 47 ```ts 48 Stack({ alignContent: Alignment.BottomStart }) { 49 Column() { 50 Text('Stack子元素1').fontSize(20) 51 }.width(100).height(100).backgroundColor(0xffd306).zIndex(2) 52 Column() { 53 Text('Stack子元素2').fontSize(20) 54 }.width(150).height(150).backgroundColor(Color.Pink).zIndex(1) 55 Column() { 56 Text('Stack子元素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
