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 initial 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): T 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**Atomic service API**: This API can be used in atomic services since API version 11. 18 19**System capability**: SystemCapability.ArkUI.ArkUI.Full 20 21**Parameters** 22 23| Name| Type | Mandatory| Description | 24| ------ | ------ | ---- | ------------------------------------------------------------ | 25| value | number | Yes | Stacking order 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. When dynamically changing zIndex does not involve adding or removing sibling nodes, the components are sorted stably based on their previous stack level.| 26 27**Return value** 28 29| Type| Description| 30| -------- | -------- | 31| T | Current component.| 32 33## Example 34 35### Example 1: Setting the Component Stacking Order 36 37This example demonstrates how to set the stacking order of components using **zIndex**. 38 39```ts 40// xxx.ets 41@Entry 42@Component 43struct ZIndexExample { 44 build() { 45 Column() { 46 Stack() { 47 // Components in the stack layout overlap. By default, later-defined elements are on top. Elements with higher zIndex values appear in front of those with lower zIndex values. 48 Text('1, zIndex(2)') 49 .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb) 50 .zIndex(2) 51 Text('2, default zIndex(1)') 52 .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart) 53 .zIndex(1) 54 Text('3, zIndex(0)') 55 .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart) 56 }.width('100%').height(200) 57 }.width('100%').height(200) 58 } 59} 60``` 61Display of child components in the **Stack** component when **zIndex** is not set 62 63 64 65Display of child components in the **Stack** component when **zIndex** is set 66 67 68 69### Example 2: Dynamically Modifying the zIndex Attribute 70 71This example demonstrates dynamically modifying the **zIndex** attribute on a **Button** component. 72 73```ts 74// xxx.ets 75@Entry 76@Component 77struct ZIndexExample { 78 @State zIndex_ : number = 0 79 build() { 80 Column() { 81 // Clicking the Button component changes the zIndex value. Components are sorted stably based on their previous stacking order. 82 Button("change Text2 zIndex") 83 .onClick(()=>{ 84 this.zIndex_ = (this.zIndex_ + 1) % 3; 85 }) 86 Stack() { 87 Text('1, zIndex(1)') 88 .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart) 89 .zIndex(1) 90 Text('2, default zIndex(0), now zIndex:' + this.zIndex_) 91 .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart) 92 .zIndex(this.zIndex_) 93 }.width('100%').height(200) 94 }.width('100%').height(200) 95 } 96} 97``` 98 99Effect without clicking the **Button** component to change **zIndex** 100 101 102 103Effect after clicking the **Button** component to dynamically change **zIndex** so that **Text1** and **Text2** have the same **zIndex** value 104 105 106 107Effect after the **Button** component is clicked to dynamically change **zIndex** so that **Text1** has a higher **zIndex** value than **Text2** 108 109 110
