css - parent 的 z-index 如何影响 child 的 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>

如果我不把parent的z-index设置为1，child的z-index就会让它在parent之下。但是当我将父级的 z-index 设置为 1(或任何大于 0 的数字)时，子级的 z-index 将不起作用!

为什么会这样？

Answer 1

默认情况下，所有背景颜色都在文本后面。 z-index 默认为 auto，表示“将堆栈顺序设置为其父项”。但是，在子元素上使用 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>