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

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 2

What @BoltClock said is right.

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

About z-index: 0 it's important to note the following:

z-index: 0 creates a stacking context while z-index: auto do not. You can check MDN for more information about this.

In most cases this won't affect the rendered elements.

The following is an example where it matters:

.box {
  position: relative;
  width: 64px;
  height: 64px;
  top: 32px;
  left: 32px;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

#example-auto {
  display: inline-block;
}

#example-0 {
  display: inline-block;
  margin-left: 64px;
}

<div id="example-auto">
  <div class="box red">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

<div id="example-0">
  <div class="box red" style="z-index: 0">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

In both cases, red and blue are siblings with a position: relative and green is a child of red with position: relative and z-index: 1:

• Root
  • Red: position: relative
    • Green: position: relative; z-index: 1
  • Blue: position: relative

In the first example, green will be positioned above red and blue. This is because it has a z-index: 1, so a stacking context is created and put above the root context.

In the second example, green will be positioned above red, but below blue. This is because red has z-index: 0, so it creates a stacking context at the same level of blue. So green will be above red (because green also creates a stacking context), but below blue because it's trapped in the context of red.

---

Here's a more practical example. We want an object element wrapped in an a element. When the data is an svg, the anchor will be ignored when hovering over the svg. To fix this, we can use z-index: 0 for a and z-index: -1 for object.

<a href="#test1" style="display: inline-block; width: 100px">
  <object type="image/svg+xml" data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/star.svg"></object>
</a>

<a href="#test2" style="display: inline-block; width: 100px; position: relative; z-index: 0">
  <object type="image/svg+xml" data="https://dev.w3.org/SVG/tools/svgweb/samples/svg-files/star.svg" style="position: relative; z-index: -1"></object>
</a>

Answer 3

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 4

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