CSS否定z-index:这是什么意思？

Question

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

我搜索的答案,但只找到了这个:
https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
的"负值降低优先"不为我意味着什么.

Answer 1

接受的答案是正确的，但并不完全正确。

首先，z-index 的初始值是auto，而不是0。

当您分配一个元素z-index: 0（或任何其他整数）时，您正在创建一个新的堆栈上下文。z-index: auto不会创建堆叠上下文。这很重要，因为父 withauto将出现在子 with 前面-1，而父 with0将出现在子 with 后面-1（参见代码段）。

每个堆叠上下文将根据堆叠顺序对其内容进行排序。

同样重要的是要注意，z-index仅适用于定位元素。定位的元素比最初的任何其他position: static-所以relative，absolute等

此外，您应该知道对某些 css 属性（如filter、transform和 ）的更改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 属性

了解不透明度如何影响堆叠上下文

阅读另一篇关于堆叠顺序的深入文章。

Answer 2

如果0是默认的z-index,则在大多数元素下将呈现具有负z-index的元素,除非它们具有更低的z-index.