Z-order Control
NOTE This attribute is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
Required Permissions
None
Attributes
Name | Type | Default Value | Description |
---|---|---|---|
zIndex | number | 0 | Hierarchy of sibling components in a container. A larger z-order value indicates a higher display level. |
Example
@Entry
@Component
struct ZIndexExample {
build() {
Column() {
Stack() {
// Components are stacked. By default, the component defined later is on the top.
Text('first child, zIndex(2)')
.size({width: '40%', height: '30%'}).backgroundColor(0xbbb2cb)
.zIndex(2)
// The default value is 0.
Text('second child, default zIndex(0)')
.size({width: '90%', height: '80%'}).backgroundColor(0xd2cab3).align(Alignment.TopStart)
Text('third child, zIndex(1)')
.size({width: '70%', height: '50%'}).backgroundColor(0xc1cbac).align(Alignment.TopStart)
.zIndex(1)
}
}.width('100%').height(200)
}
}