htmlcssz-index

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.

Solution

  • 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.