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## zIndex 10 11zIndex(value: number) 12 13Sets the stack level of the component. 14 15**Widget capability**: Since API version 9, this feature is supported in ArkTS widgets. 16 17**System capability**: SystemCapability.ArkUI.ArkUI.Full 18 19**Parameters** 20 21| Name| Type | Mandatory| Description | 22| ------ | ------ | ---- | ------------------------------------------------------------ | 23| value | number | Yes | Stack level of the component relative to its sibling components in a container. The components with a larger z-index value cover those with a smaller one.| 24 25 26## Example 27 28```ts 29// xxx.ets 30@Entry 31@Component 32struct ZIndexExample { 33 build() { 34 Column() { 35 Stack() { 36 // 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. 37 Text('1, zIndex(2)') 38 .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb) 39 .zIndex(2) 40 Text('2, default zIndex(1)') 41 .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart) 42 .zIndex(1) 43 Text('3, zIndex(0)') 44 .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart) 45 }.width('100%').height(200) 46 }.width('100%').height(200) 47 } 48} 49``` 50Display of child components in the **\<Stack>** component when **zIndex** is not set 51 52 53 54Display of child components in the **\<Stack>** component when **zIndex** is set 55 56 57
