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 sc

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

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 3

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

Answer 4

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 fiddle is an example where it matters: https://jsfiddle.net/ramcdvns/3/

Code and explanation below:

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

  .red {
    background: red;
  }

  .green {
    background: green;
  }

  .blue {
    background: blue;
  }

  #example-0 {
    margin-top: 32px;
  }
</style>

<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 examples, 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.

Hopefully the fiddle is clear enough as it's hard to explain this in words.

Answer 5

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