html元素的默认z-index值是多少？

Question

在未定义z-index的情况下如何堆叠多个HTML元素？

是否为不同标签指定了默认值？

Answer 1

默认值为外观顺序，请参见：https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Answer 2

由于z-index-property仅适用于定位的元素（position: absolute|relative|fixed），因此没有进一步的样式设置就没有默认值。

放置时的默认值为z-index: auto，类似于z-index: 0。

如果您有多个带有z-index: auto或z-index: 0的定位元素，它们将根据（W3C CSS2 specification on stacking context）进行堆叠：

  

所有定位的后代，其“ z-index：自动”或“ z-index：0”以树顺序排列。

这意味着在文档中定义的顺序，最后一个元素是最高的堆叠：

div {
  position: absolute;
}

#div1 {
  background-color: red;
  height: 50px;
  width: 50px;
}

#div2 {
  background-color: green;
  height: 40px;
  width: 40px;
}

#div3 {
  background-color: blue;
  height: 30px;
  width: 30px;
}

<div id="div1">
  <div id="div2"></div>
</div>
<div id="div3"></div>

Answer 3

如果未提供z-index，则使用默认的堆栈顺序。.堆栈顺序向下的元素将显示在顶部。