1# Z-order Control 2 3The **zIndex** attribute sets the z-order of a component in the stacking context. 4 5> **NOTE** 6> 7> The APIs of this module are supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Attributes 11 12 13| Name| Type| Description| 14| -------- | -------- | -------- | 15| zIndex | number | Hierarchy of sibling components in a container. A larger value indicates a higher display level.<br>Since API version 9, this API is supported in ArkTS widgets.| 16 17 18## Example 19 20```ts 21// xxx.ets 22@Entry 23@Component 24struct ZIndexExample { 25 build() { 26 Column() { 27 Stack() { 28 // Components are stacked. By default, the component defined later is on the top. A component with a larger zIndex value is displayed before one with a smaller zIndex value. 29 Text('1, zIndex(2)') 30 .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb) 31 .zIndex(2) 32 Text('2, default zIndex(1)') 33 .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart) 34 .zIndex(1) 35 Text('3, zIndex(0)') 36 .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart) 37 }.width('100%').height(200) 38 }.width('100%').height(200) 39 } 40} 41``` 42Display of child components in the **\<Stack>** component when **zIndex** is not set 43 44 45 46Display of child components in the **\<Stack>** component when **zIndex** is set 47 48 49
