Introduction to z-index property in CSS

Cascading context: a three-dimensional concept, indicating the position of the element on the Z axis

The cascade can be nested and combined into a hierarchical context
Each cascading context is independent of its sibling elements and can be cascaded or rendered. When, only descendant elements are considered
Each stack is self-contained

Stacking order

1 background~border
2 负z-index
3 block盒子
4 float浮动盒子
5 inline/inline-block盒子
6 z-index:auto/z-index:0
7 正z-index

Features

Support Negative value
Support CSS3 Animation
Need to be used together with positioning elements in css2.1
If positioning elements z-index are nested: the principle of coming last, Whichever is bigger will go first
If nesting occurs: ancestor priority principle, the premise is that z-index is a numerical value instead of auto, auto does not create a cascading context

Use

Default positioning element z-index: auto; /z-index: 0
z-index is not The positioning element of auto will create a cascading context
z-index The comparison of the cascading order stops at the parent cascading context
Avoid z-index Nested levels Relationship confusion
Avoid z-index confusion, the style problem of a mountain rising in a flash
Negative values ​​can be used to hide

The above is the detailed content of Introduction to z-index property in CSS. For more information, please follow other related articles on the PHP Chinese website!