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

html css z-index
bluelurker picture bluelurker · Jan 1, 2013 · Viewed 12.3k times · Source

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.

Answer

BoltClock picture BoltClock · Jan 1, 2013

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.

Related questions

Bring element to front using CSS

I can't figure out how to bring images to front using CSS. I've already tried setting z-index to 1000 and position to relative, but it still fails. Here's example-

Read More
Minimum and maximum value of z-index?

I have a div in my HTML page. I am showing this div based on some condition, but the div is displaying behind the HTML element where I pointed the mouse cursor. I have tried all values for z-index from 0 …

Read More
Why does z-index not work?

So if I understand z-index correctly, it would be perfect in this situation: I want to place the bottom image (the tag/card) below the div above it. So you can't see the sharp edges. How do I do this? …

Read More