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

Question

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 1

z-index:0 is always the "default layer" (the layer in which all elements without an explicit z-index reside), and z-index:auto means: "Sets the stack order equal to its parent". Since all the children of a parent by default start in the "z-layer 0" - relative to their parent, then, in-affect, z-index:auto and z-index:0 means the same thing: they will both be in the same "layer", and their stacking order will be according to the default stacking rules, which you can see here.

Answer 2

z-index: auto

Sets the stack order equal to its parents. This is default.

z-index:0

does nothing

z-index:not

Sets the stack order equal to its parents same as auto.

z-index:inherit

Specifies that the z-index should be inherited from the parent element

Reference for further reading and testing:

Link

Answer 3

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.

Answer 4

n CSS, you can position 2 or more objects to overlap each other. Their z-indexes determine which objects are "in front of" or "behind" other objects that they overlap. The higher an object's z-index, the "higher in the stack" of objects it will display