pelicin › web › CSS

Z-Index

z-index property sets the z-ordering of elements (i.e., which element comes in front of another).

Basic Concepts

Stacking Context

z-index will only work as expected if the elements which you try to reorder belong to one stacking context. If two elements belong to different stacking contexts, their z-index values won't be compared to each other.

A stacking context can be contained within other stacking context (creating tree-like hierarchy), but sibling stacking contexts are independent of each other. Resolve z-axis placement from the children stacking context, then the parent, and so on.

You can see what creates a stacking context here.

With Nesting

Note that nesting plays a big role. If an element B sits on top of element A, a child element of element A can never be on top of element B (CSS-Tricks).

(This is the implication of "resolve z-axis placement from the children stacking context, then the parent, and so on" — once stacking and rendering within A is completed, the whole element A is passed for stacking in the parent element with respect to its sibling B.)

If B is on top of A, children of A can't be on top of B
If B is on top of A, children of A can't be on top of B

CSS Properties

z-index

Specify auto or an integer.

  • auto — Does not create a new stacking context. This element's stacking context is the same as its parent.
  • integer — (E.g. 1, 0, or -2). Places the element in this stack level in the current stacking context. Also creates a new local stacking context with stack level of 0. (The creation of a new stacking context implies that the z-index's of this element's descendants are not compared to the z-index's of elements outside this element.)

Obscured CSS Properties

isolation

Forces an element to create a new stacking context.

  • auto — Only creates a stacking context if required (depending of the element's CSS properties)
  • isolate — Forces the creation of a new stacking context.

References