Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

z-index

Introduction

The z-index CSS property sets the z-order of an element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.

INFO

If we want to generate stacking context, you can add z-index: 0 to an element. For example, make children follow the scroll by adding z-index: 0 to the scroll-view

It is not recommended to use z-index in the direct children of list. This may affect the reuse of list. If you use z-index in the list item, the item should be a stacking context.

Examples

css-apisrc/z-index/App.tsx
Preview

Syntax

z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1;

Values

  • <number> This integer is the stack level of the generated box in the current stacking context.

  • Default value auto

Formal definition

Initial valueempty value
Applies toall elements
Inheritedno
Animatableno

Formal syntax

z-index = <integer>

Difference between web

The default value of web is auto. Lynx determines whether it is a stacking context by setting z-index property.

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.