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**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  | 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.|
26
27
28## Example
29
30```ts
31// xxx.ets
32@Entry
33@Component
34struct ZIndexExample {
35  build() {
36    Column() {
37      Stack() {
38        // 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.
39        Text('1, zIndex(2)')
40          .size({ width: '40%', height: '30%' }).backgroundColor(0xbbb2cb)
41          .zIndex(2)
42        Text('2, default zIndex(1)')
43          .size({ width: '70%', height: '50%' }).backgroundColor(0xd2cab3).align(Alignment.TopStart)
44          .zIndex(1)
45        Text('3, zIndex(0)')
46          .size({ width: '90%', height: '80%' }).backgroundColor(0xc1cbac).align(Alignment.TopStart)
47      }.width('100%').height(200)
48    }.width('100%').height(200)
49  }
50}
51```
52Display of child components in the **Stack** component when **zIndex** is not set
53
54![nozindex.png](figures/nozindex.png)
55
56Display of child components in the **Stack** component when **zIndex** is set
57
58![zindex.png](figures/zindex.png)
59