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

For a positioned box (that is, one with any position other than static), the z-index property specifies:

  • The stack level of the box in the current stacking context.
  • Whether the box establishes a local stacking context.

Values

auto

The box does not establish a new local stacking context. The stack level of the generated box in the current stacking context is 0.

integer

This is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element

Headline

This is the stack level of the generated box in the current stacking context. The box also establishes a local stacking context. This means that the z-indexes of descendants are not compared to the z-indexes of elements outside this element