CSS 中 auto、0 和 no z-index 之间的区别

在 CSS 中，z-index 属性表示元素在 z 轴上的堆叠顺序。当多个元素重叠时，z-index 值越大的元素会显示在 z-index 值较小的元素之上。

auto、0 和 no z-index 是三种不同的 z-index 属性值，它们之间有以下区别：

auto

当一个元素的 z-index 值设为 auto 时，它将继承其父元素的 z-index 值。如果该元素没有父元素或父元素的 z-index 值也为 auto，那么该元素的 z-index 值将默认为 0。

例如，下面的代码中，元素 div1 和 div2 的 z-index 值都为 auto，它们分别继承了其父元素 container 的 z-index 值 1 和 2：

<div class="container" style="z-index: 2">
  <div class="box" id="div1"></div>
</div>
<div class="container" style="z-index: 1">
  <div class="box" id="div2"></div>
</div>

0

当一个元素的 z-index 值设为 0 时，它将被放置在堆叠顺序的底部，即在所有其他具有正 z-index 值的元素之下。

例如，下面的代码中，元素 div1 和 div2 的 z-index 值都为 0，它们被放置在 container 的下方：

<div class="container" style="z-index: 1">
  <div class="box" id="div1" style="z-index: 0"></div>
</div>
<div class="container" style="z-index: 2">
  <div class="box" id="div2" style="z-index: 0"></div>
</div>

no z-index

当一个元素没有指定 z-index 值时，它的 z-index 值将默认为 auto。

例如，下面的代码中，元素 div1 没有指定 z-index 值，它将继承 container 的 z-index 值 1，而元素 div2 的 z-index 值为 0：

<div class="container" style="z-index: 1">
  <div class="box" id="div1"></div>
  <div class="box" id="div2" style="z-index: 0"></div>
</div>

总之，当在 CSS 中处理元素的堆叠顺序时，我们需要明白 auto、0 和 no z-index 之间的区别，并根据实际需求选择合适的 z-index 值。