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下面.但是当我将 parent 的 z-index 设置为 1（或任何大于 0 的数字）时，child 的 z-index 将不起作用！

为什么会这样？

Answer 1

当然，如果将 z-index: -1; 设置为 child，child 将位于 parent 之后。如果从 child 中删除 z-index: -1;，您还可以从 parent 中删除 z-index: 1;。

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

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

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

Answer 2

默认情况下，所有背景颜色都在文本后面。 z-index 默认值为自动，表示 "Sets the stack order equal to its parents"。但是，在 child 上使用 z-index 会将其移出自然堆栈顺序并将其放在背景后面。如果您将 parent 更改为也有一个 Z-Index，那么它将重新加入堆栈并且背景颜色将再次出现在文本后面。

parent 和 child 都设置为 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>

Child 设置为 z-index -1 现在它与 parent

不在同一个堆栈中

#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>

Child 设置为 z-index -1 并且 parent 设置为 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>

parent 的 z-index 如何影响 child 的 z-index？

How does parent's z-index affect the child's z-index?

css

z-index