Css ：：伪元素堆叠订单发出前

静态定位时，:：before伪元素（z-index）在子元素的内容之前堆叠，但在子元素的背景之后堆叠。有谁能解释为什么会发生这种情况，甚至是如何发生的，或者这是否是所有主流浏览器都存在的问题

<style>
div { background-color:yellow; width:400px; }
div::before { background-color:red; content:"div::before"; }
div::after { background-color:green; content:"div::after"; }
div p { background-color:blue; color:white; margin:-15px 0; padding:0; }
</style>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sed tellus sed tellus sodales hendrerit tristique et elit.</p>
</div>

div{背景色：黄色；宽度：400px；}
div:：before{背景色：红色；内容：“div:：before”}
div:：after{背景色：绿色；内容：“div:：after”}
div p{背景色：蓝色；颜色：白色；边距：-15px 0；填充：0；}
Lorem ipsum dolor sit amet，是一位杰出的献身者。这是一个很好的例子

---

包含两个伪元素和

p

元素的

div

内容参与相同的堆叠上下文（相对于

div

）。这是因为，正如您所注意到的，它们三个都是静态定位的；换句话说，根本没有定位。（是的，这些元素在流动时确实沿z轴堆叠；您无法使用

z-index

操纵它们的堆叠级别，因为它们没有定位。）

根据各部分的绘制顺序，在与您的问题相关的地方，粗体强调：

每个框属于一个堆叠上下文。给定堆栈上下文中的每个定位框都有一个整数堆栈级别，即其在z轴上相对于同一堆栈上下文中的其他堆栈级别的位置。堆栈级别较高的框总是在堆栈级别较低的框前面格式化。框可能具有负堆栈级别堆叠上下文中具有相同堆叠级别的框根据文档树顺序从后向前堆叠。

在每个堆叠上下文中，按从后到前的顺序绘制以下层：

构成堆叠上下文的元素的背景和边框。

具有负堆栈级别的子堆栈上下文（首先是最负的）

流内、非内联级别、非定位子体。

未定位的浮动

流内、内联级别、非定位子体，包括内联表和内联块。

堆栈级别为0的子堆栈上下文和堆栈级别为0的定位子体

具有正堆栈级别的子堆栈上下文（最小正优先级）

由于

div:：before

插入在

div

的内容之前，而

div:：before

插入在其之后，因此当它们以静态位置内联显示时，它们自然会遵循此规则，即使将块元素夹在中间（排序同时考虑块框和内联框）

请注意，出于明显的原因，通常先绘制背景，然后将内容覆盖在背景上：

p

元素作为块级元素，具有首先绘制的背景（#3）

然后在

p

background（#5）上绘制内联级伪元素及其背景。在格式化模型中，它们是

p

元素的兄弟，因此它们都参与

div

的堆叠上下文，而不是

p

的堆叠上下文

div:：before

伪元素（其内容和背景）显示在

p

文本后面，因为它位于可视树中的

p

之前

div:：after

伪元素（其内容和背景）出现在

p

文本前面，因为它位于可视树中的

p

之后

正如我在评论中指出的那样，

div:：before

的背景将隐藏在

p

元素的背景后面，而不是文本；相反，

div:：before

的文本将位于背景和

p

元素的文本之间。还请注意，

div:：after

的背景绘制在

p

的背景前面，而内容绘制在最前面。同样，这与根据上述规则在内容之前或之后绘制背景有关

---

---

1更详细的描述可以在规范的中找到。

如果您将两个伪元素都显示为块，则

：

前背景隐藏在

p

后背景：请注意，默认情况下它们显示为内联。@BoltClock:这很奇怪，但是，从表象上看，这很有趣……这是一个bug还是出于设计？（如果你甚至能够，或者处于一个位置，回答这个问题。）这是无效的，但它不应该有一个冒号吗<代码>:before和

：before

之后？@Kobi:CSS3中引入了伪元素的双冒号符号：@David Thomas:你不认为我是CSSWG的成员，是吗O（我多么希望…）这几乎是有道理的-但是为什么

：before

在文本和内容背景之间？（好的，我想这回答了我的问题

：P

）。嘿，这东西比我想象的要复杂…使用跨度而不是伪元素会返回相同的结果。关于你在项目符号2上所说的内容：根据我从规范中了解到的，伪元素，

p

和

p

中的文本将处于相同的堆叠上下文中（创建新的

p

上没有

z-index

+

位置

-或

不透明度

）。无论如何，我已经阅读了您的答案（以及规范，包括）多次，试图回答，但我无法完全理解问题的原因。也许您可以帮助我？