::在伪元素堆叠顺序发布之前

Question

静态放置时，::
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>

http://jsfiddle.net/funkyscript/ALrgf/

Answer 1

的内容（div包括两个伪元素和p元素）参与相同的堆叠上下文（相对于div）。正如您所注意到的，这是因为它们全部三个都是静态放置的。换句话说，根本没有定位。（是的，这些元素在流动时确实会沿z轴堆叠；您不能使用来操纵它们的堆叠级别，z-index因为它们没有被定位。）

这是各部分绘制顺序的摘要1，在与您的问题相关的地方，以粗体强调：

每个盒子都属于一个 堆叠上下文 。给定堆叠上下文中每个定位的框都有一个整数 堆栈级别
，即它在z轴上相对于同一堆栈上下文中其他堆栈级别的位置。具有较高堆栈级别的框始终在具有较低堆栈级别的框前面格式化。盒子的堆叠高度可能为负。
在堆叠上下文中具有相同堆叠级别的框将根据文档树顺序从头到尾堆叠。

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

1. 构成堆叠上下文的元素的背景和边界。
2. 堆栈级别为负的子堆栈上下文（首先为负）。
3. 流入，非内联级别，未定位的后代。
4. 未定位的浮点数。
5. 流内，行内，非定位后代，包括内联表和内联块。
6. 堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代。
7. 子堆栈上下文的堆栈级别为正（最低优先级为第一）。
   

因为div::before插入在的内容之前div，然后插入到的内容div::after之后，所以当它们以静态位置显示内联时，即使将一个block元素夹在中间，它们也自然会遵循此规则（排序考虑了block
box和inline box） 。

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

1. 该p元素作为块级元素，其背景首先被绘制（＃3）。

2. 然后，将内联级伪元素及其背景绘制在背景之上p（＃5）。在格式化模型中，它们是p元素的兄弟姐妹，因此它们都参与div而不是的堆叠上下文p。

3. 该div::before伪元素（包括它的内容和背景）将出现在后面的p文本，因为它涉及之前p在视觉树。

4. 该div::after伪元素（包括它的内容和背景）将出现在前面p，因为它涉及之后的文本p在视觉树。

如我的评论所示，如果将伪元素显示为块，则的背景div::before将隐藏在p元素的背景之后，而不是文本的后面；相反，的文本div::before将位于背景和p元素的文本之间。另请注意，的背景div::after画在的背景之前p，而内容则画在最前面。同样，这与在与上述规则相关的内容之前或之后绘制背景有关。

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