问题

What is the difference between:

z-index: auto
z-index: 0
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.

回答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.

回答2:

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.

回答3:

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

回答4:

As @BoltClock said:

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

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" style="z-index: 0">
    <div class="box green" style="z-index: 1"></div>
  </div>
  <div class="box blue"></div>
</div>

<div id="example-0">
  <div class="box red">
    <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.

回答5:

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

来源：https://stackoverflow.com/questions/14109862/difference-between-auto-0-and-no-z-index

标签

html

css

z-index

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

问题