父元素的z-index如何影响子元素的z-index？

Question

#parent {
  position: relative;
  background: red;
  width: 100px;
  height: 100px;
  z-index: 1;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <p>
   qqq
  </p>
  <div id="child" >
    test
  </div>
</div>

如果我不将父元素的z-index设置为1，子元素的z-index会让它位于父元素下面。但是当我将父元素的z-index设置为1（或任何大于0的数字）时，子元素的z-index就无法起作用了！

为什么会这样呢？

- WendellLiu

---

它为什么不起作用？它跟在父级后面？ - Sina

你期望什么，又想要实现什么目标？ - caramba

给父元素设置 z-index 值会启动一个新的层叠顺序。一旦你给父元素设置了 z-index 值，那么其所有子元素的 z-index 值都将相对于父元素的 z-index 值而言。 - I haz kode

我想让子元素在父元素下面，所以我将子元素的z-index设置为0。这样可以实现！但是当我将父元素的z-index设置为1时，之前的效果就不再起作用了。 - WendellLiu

“Under”是什么意思？是指在下面还是在后面？如果是在后面，它就不可见了。这就是z-index的作用。 - caramba

Answer 1

默认情况下，所有背景颜色都在文本后面。 z-index 的默认值为自动，表示“将堆叠顺序设置为其父级”。但是，在子元素上使用z-index将使它脱离自然堆叠顺序并放置在背景后面。如果您将父元素更改为具有Z-Index，则它将重新加入堆栈，背景颜色将再次出现在文本后面。

父元素和子元素均设置为AUTO。两者在同一堆栈中。

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  transform: translateX(20px);
}

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

子元素被设置为z-index - 1，现在它不再与父元素处于同一堆栈中。

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

将子元素的 z-index 设为 -1，将父元素的 z-index 设为 1，使它们处于同一堆栈中，因此背景颜色会被放在两个元素后面。

#parent {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
  z-index: 1;
}

#child {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: -1;
  transform: translateX(20px);
}

<div id="parent">
  <div>
   qqq
  </div>
  <div id="child" >
    test
  </div>
</div>

- Joshua Duxbury

---

我不是很理解这个。所以，在 OP 的问题中，如果你给 #child 添加一个 background: blue;（jsfiddle），那么蓝色背景也会覆盖红色背景，即使它的 z-index 更低。似乎子元素在所有方面都能打败父元素。 - Garrett