如何将较高z-index元素之下的较低z-index父元素的子元素？

Question

有没有一种方法可以这样操纵堆叠上下文？我希望文字在蓝色元素的顶部。

div{
  width: 200px;
  height: 200px;
  position: absolute;
}

#a{
  z-index: 0;
  background-color: red;
  left: 150px;
  top: 150px;
}
#b{
  z-index: 1;
  background-color: blue;
  left: 0;
  top: 0;
}
p{
  z-index: 2;
}

<div id="a">
  <p>verylongtext</p>
</div>
<div id="b"></div>

是否有任何通配符或类似于!important的东西可以覆盖堆叠上下文？唯一的方法是将文本作为独立元素处理。

- Gergő Horváth

Answer 1

是的，你可以这样做，诀窍是保持红色元素的 z-index:auto，这样 p 就不会属于它的堆叠上下文，可以放置在蓝色元素上方。

auto

盒子不会创建新的局部堆叠上下文。生成的盒子在当前堆叠上下文中的堆叠级别与其父级盒子相同。^ref

不要忘记使 p 定位以便能够使用 z-index：

div {
  width: 200px;
  height: 200px;
  position: absolute;
}

#a {
  background-color: red;
  left: 150px;
  top: 150px;
}

#b {
  z-index: 1;
  background-color: blue;
  left: 0;
  top: 0;
}

p {
  z-index: 2;
  position: relative;
}

<div id="a">
  <p>verylongtext</p>
</div>
<div id="b"></div>

您可以只使用margin来移除所有内容并进行操作：

div {
  width: 200px;
  height: 200px;
}

#a {
  background-color: red;
  margin-left: 150px;
  margin-top: 150px;
  overflow:hidden; /*remove margin-collapsing*/
}

#b {
  background-color: blue;
  margin-top: -350px;
}

<div id="a">
  <p>verylongtext</p>
</div>
<div id="b"></div>

您可以参考这个问题（元素重叠时背景的奇怪行为）来了解它的工作原理。

- Temani Afif

Answer 2

很遗憾，无法以此方式打破层叠上下文，因为子元素的z-index设置为与其父元素相同的层叠顺序。您需要将文本作为同级元素，并确保它具有一个position（而不是static），以便应用z-index。

从这里开始，只需简单地将其定位为所需位置（在本例中为top: 150px和left: 150px）即可。

可以在以下内容中看到：

div {
  width: 200px;
  height: 200px;
  position: absolute;
}

#a {
  z-index: 0;
  background-color: red;
  left: 150px;
  top: 150px;
}

#b {
  z-index: 1;
  background-color: blue;
  left: 0;
  top: 0;
}

p {
  position: absolute;
  z-index: 2;
  top: 150px;
  left: 150px;
}

<div id="a"></div>
<div id="b"></div>
<p>verylongtext</p>

- Obsidian Age