auto,0和no z-index之间的区别？

Question

有什么区别:

1. z-index: auto
2. z-index: 0
3. 没有z-index在所有

所有上述情况是一个div包围2个divS,div1和div2每一个都具有z-index其是9和10分别.

封闭div在HTML的堆叠上下文中.

Answer 1

不指定z-index是相同的z-index: auto; 这是它的初始值.

auto并且0意思是一样的,如果你的元素不会创建自己的堆叠内容; 例如,它不是相对的,绝对的或固定的.

如果您的封闭div没有定位,那么无论您设置它z-index的内容都无关紧要; 它及其所有内容都将参与堆叠环境html,其后代将始终位于它的前面.

Answer 2

@BoltClock 说的是对的。

不指定z-index就等于z-index: auto;它的初始值。

关于z-index: 0重要的是要注意以下几点：

z-index: 0不创建堆叠上下文z-index: auto。您可以查看MDN以获取更多信息。

在大多数情况下，这不会影响渲染的元素。

以下小提琴是一个重要的例子：https : //jsfiddle.net/ramcdvns/3/

代码和解释如下：

<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>

在这两个示例中，red 和 blue 是带有 a 的兄弟姐妹，position: relativegreen 是带有position: relative和的 red 的孩子z-index: 1：

• 根
  • 红色的： position: relative
    • 绿： position: relative; z-index: 1
  • 蓝色： position: relative

在第一个示例中，绿色将位于红色和蓝色之上。这是因为它有一个z-index: 1，所以会创建一个堆叠上下文并将其放在根上下文之上。

在第二个示例中，绿色将位于红色之上，但位于蓝色之下。这是因为红色有z-index: 0，所以它在蓝色的同一级别创建了一个堆叠上下文。所以绿色将高于红色（因为绿色也会创建堆叠上下文），但低于蓝色，因为它被困在红色的上下文中。

希望小提琴足够清楚，因为很难用语言解释这一点。

Answer 3

z-index:0始终是“默认层”（所有没有显式元素的位置z-index都位于其中的层），其z-index:auto含义是：“ 将堆栈顺序设置为其父级 ”。由于在“Z-0层”所有父母的子女在默认情况下启动- 相对于他们的父母，那么，在-影响，z-index:auto并z-index:0意味着同样的事情：他们都将在同一个“层”，以及它们的叠加顺序将根据默认的堆叠规则，您可以在此处查看。