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

Question

有什么区别：

1. z-index: auto
2. z-index: 0
3. 根本没有z-index

所有上述方案均适用于div，其中包含两个div，div1和div2，每个z-index 9为10分别和div。

封闭的{{1}}位于HTML的堆叠上下文中。

Answer 1

未指定z-index与z-index: auto相同;这是它的初始值。

如果您的元素没有创建自己的堆叠上下文，那么

auto和0意味着相同的事情;例如它不是相对的，绝对的或固定的。

如果您的封闭式div未定位，那么无论您将其设置为z-index都无关紧要;它及其所有内容都将参与html的堆叠上下文，其后代将始终位于其前面。

Answer 2

z-index:0始终是“默认图层”（所有没有显式z-index的元素所在的图层），z-index:auto表示：“设置堆栈顺序相等到其父母“。 由于父母的所有孩子默认情况下都是从“z-layer 0”开始 - 相对于父母的 ，因此，有效，z-index:auto和z-index:0表示同样的事情：它们都在同一个“层”中，它们的堆叠顺序将根据默认的堆叠规则，您可以看到here。

Answer 3

z-index：auto

将堆栈顺序设置为等于其父项。这是默认值。

的z-index：0

什么都不做

的z-index：不

将堆栈顺序设置为与其父项相同，与auto。相同。

的z-index：继承

指定应从父元素

继承z-index

进一步阅读和测试的参考：

Link

Answer 4

@BoltClock说：

  

未指定z-index与z-index: auto;相同，是其初始值。

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

在两个示例中，红色和蓝色是带有position: relative的兄弟姐妹，绿色是带有position: relative和z-index: 1的红色孩子：

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

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

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

希望小提琴很清楚，因为很难用语言来解释。

Answer 5

n CSS，您可以定位2个或更多对象以相互重叠。他们的z索引确定了哪些对象在＆＃34;之前。或＆＃34;背后＆＃34;其他重叠的对象。对象的z-index越高，堆栈中的＆＃34;越高＆＃34;它将显示的对象