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的东西可以覆盖堆叠上下文？唯一的方法就是使文本成为独立的元素？

Answer 1

是的，技巧是将红色元素保留在z-index:auto中，以使p不属于其堆叠上下文，并且可以放置在蓝色元素上方。

自动

框不会建立新的本地堆栈上下文。的   当前堆栈上下文中生成的框的堆栈级别为   与父母的盒子相同。^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>

您还可以删除所有内容并仅以边距播放：

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>

您可以参考该问题（Strange behavior of background when elements are overlapping）以了解其工作原理。

Answer 2

不幸的是，由于孩子的 z-index 被设置为与父对象相同的堆叠索引，因此无法以此方式破坏堆栈上下文。您将需要使文本成为同级元素，并另外确保其具有sudo apt-get install libhdf5-serial-dev libqtgui4 libqt4-test以外的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;
}

Z索引元素较高时，Z索引父母的孩子越低？

2 个答案: