CSS 负 z-index：这是什么意思？

如果我向元素的 z-index 属性添加负整数值，根据标准，预期效果是什么？

我搜索了答案，但只找到了这个：
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
The “负值降低优先级”对我来说没有任何意义。

The 接受的答案 https://stackoverflow.com/questions/33217407/css-negative-z-index-what-does-it-mean/33217492#33217492是在正确的轨道上，但并不完全正确。

对于初学者来说，z-index 的初始值为auto, not 0.

当你分配一个元素时z-index: 0（或任何其他整数），您正在创建一个新的堆叠上下文 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context. z-index: auto不创建堆叠上下文。这很重要，因为父母auto将出现在孩子面前-1，但父母有0将出现在孩子身后-1（参见片段）。

每个堆叠上下文将根据堆叠顺序 https://stackoverflow.com/questions/32513540/understanding-z-index-stacking-order.

还需要注意的是z-index仅适用于定位元素。定位元素是除初始元素之外的任何元素position: static - so relative, absolute, etc.

此外，您应该注意某些 css 属性的更改，例如filter, transform and opacity还可以创建新的堆叠上下文。请参阅下面的资源以获得更清晰的信息。

p {
  position: absolute;
  top: 100%;
  width: 200px;
  margin: 0
}
.container {
  width: 200px;
  height: 200px;
  display: inline-block;
  background: none;
}
.box {
  position: relative;
  background: lightgrey;
  width: 100px;
  height: 100px;
  padding: 15px;
}
.red {
  background: lightcoral;
}
.z-1 {
  z-index: -1;
}
.z0 {
  z-index: 0;
}

<div class="container">
  <div class="box">
    z auto (initial)
    <div class="box red z-1">z -1</div>
  </div>
  <p>Parent: auto / Child: -1</p>
</div>
  
<div class="container">
  <div class="box z0">
    z 0
    <div class="box red z-1">z -1</div>
  </div>
  <p>Parent: 0 / Child: -1</p>
</div>

附加信息

创建堆叠上下文的 CSS 属性 https://stackoverflow.com/a/16148341/3550318

See how 不透明度会影响堆叠上下文 https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

Read 另一篇关于堆叠顺序的深入文章 https://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892.