bluelurker bluelurker - 3 months ago 11x
CSS Question

Difference between auto, 0, and no z-index?

What is the difference between:

  1. z-index:auto

  2. z-index:0

  3. no z index at all

all the above scenarios are for a div that encloses two divs, div1 and div2 each having a z index which is 9 and 10 respectively.

The enclosing div is in the stacking context of html.


Not specifying z-index is the same as z-index: auto; that is its initial value.

auto and 0 mean the same thing if your element doesn't create its own stacking context; e.g. it is not positioned as relative, absolute or fixed.

If your enclosing div isn't positioned, then whatever you set its z-index to doesn't matter; it and all its contents will participate in the stacking context of html, and its descendants will always be positioned in front of it.