CSS bug 在固定位置的背景和文本之间带来了伪元素[重复]

Question

好像我刚刚发现了一个错误什么的。通常，当一个元素有一个伪元素并且我希望它显示在其父元素后面时，我使用 z-index:-1。如果元素具有相对或绝对位置，但在位置固定时，会发生一些奇怪的事情：伪元素位于元素的背景和文本之间，如下所示：

div {width:200px;height:100px;position:fixed;background:black;display:block;}
div::after {content:"";position:absolute;top:0;width:100%;height:100%;background:red;z-index:-1;display:block;}

<div>
 example
</div>

可以修复此问题，以便伪元素完全位于父元素后面，就像其他位置一样吗？

谢谢你。

Answer 1

您遇到的行为是由于CSS中的堆叠上下文：

在以下场景中，文档中任何位置的任何元素都会形成堆叠上下文：

• […]
• 具有

  position

  值

  absolute

  或

  relative

  且

  z-index

  值不是

  auto

  的元素。
• 具有

  position

  值

  fixed

  […]
的元素

因此，当您在父级上使用

position: fixed

时，它会成为一个新的堆叠上下文，而当您在没有

position: absolute

 的情况下使用 

position: relative 或

z-index

时，它不是 一个新的堆叠上下文，即为什么你会看到这种行为差异。

当父元素是堆叠上下文时，它就成为位置堆叠的“容器”。默认情况下，其中的文本或其他元素位于堆叠位置

0

，但示例中的伪元素具有

z-index

的

-1

，因此它位于文本后面。它不会位于父级后面，因为父级本身就是容器。这就好像你把所有这些元素都放在一个盒子里，而元素不能离开盒子。

因此，为了让伪元素位于其堆叠上下文父级后面，我们可以使用 3D

transform

将伪元素平移到父级平面后面。我们添加

transform-style: preserve-3d

，以便“元素的子元素应该位于 3D 空间中”，然后我们可以添加

transform: translateZ(-1px)

将子元素推到后面：

div {
  width:200px;
  height:100px;
  position:fixed;
  background:black;
  display:block;
  transform-style: preserve-3d;
}
div::after {
  content:"";
  position:absolute;
  top:0;
  width:100%;
  height:100%;
  background:red;
  z-index: -1;
  display:block;
  transform: translateZ(-1px);
}

<div>
 example
</div>