logo标签列表

CSS负z-index是什么意思？

cssz-index
61
4
这个问题显然不是和链接的那个重复的——那里面没有提到负的z-index。请考虑重新打开这个问题并删除警告。 - johndodo
2个回答
102

被接受的答案是正确的方向，但并非完全正确。

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

当您为元素分配z-index: 0（或任何其他整数）时，您正在创建一个新的堆叠上下文。 z-index: auto不会创建堆叠上下文。这很重要，因为具有auto的父级将出现在具有-1的子级前面，但具有0的父级将出现在具有-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属性

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

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

stacking order

在Safari上，它（负z-index）似乎无法正常工作。 - diesel94
38

一个带有负 z-index 值的元素将会被渲染在大多数其他元素下方，除非它们具有更低的 z-index 值。

4
这个并不奇怪吧？我的意思是，如果我有三个元素的z-index分别为-1、0和1，如果我把它们都增加，比如变成1、2、3，那效果是一样的吗？ - Herbertusz
11
是的，它们是一样的。现在想象一下你有500个元素，想要其中一个元素位于其他所有元素下面。你更愿意将所有其他元素的z-index设置为1，还是只将其中一个元素的z-index设置为-1？ - Aaron
1
@Herbertusz 注意，默认情况下，元素属于根上下文。因此，如果您想将元素设置在<html>后面，您几乎必须使用负z-index。 - Pithikos
4
默认的 z-index 值是 auto 而不是 0。请参考我的回答以获得更多的解释。 - sallf
1
我还注意到，位于负 z-index 元素中的控件停止交互。 - Juan De la Cruz
显示剩余2条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接