的内容（
div包括两个伪元素和
p元素）参与相同的堆叠上下文（相对于
div）。正如您所注意到的，这是因为它们全部三个都是静态放置的。换句话说，根本没有定位。（是的，这些元素在流动时确实会沿z轴堆叠；您不能使用来操纵它们的堆叠级别，
z-index因为它们没有被定位。）
这是各部分绘制顺序的摘要1，在与您的问题相关的地方，以粗体强调：
每个盒子都属于一个 堆叠上下文 。给定堆叠上下文中每个定位的框都有一个整数 堆栈级别
，即它在z轴上相对于同一堆栈上下文中其他堆栈级别的位置。具有较高堆栈级别的框始终在具有较低堆栈级别的框前面格式化。盒子的堆叠高度可能为负。
在堆叠上下文中具有相同堆叠级别的框将根据文档树顺序从头到尾堆叠。在每个堆叠上下文中，以下各层按从前到后的顺序绘制：
- 构成堆叠上下文的元素的背景和边界。
- 堆栈级别为负的子堆栈上下文（首先为负）。
- 流入，非内联级别，未定位的后代。
- 未定位的浮点数。
- 流内，行内，非定位后代，包括内联表和内联块。
- 堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代。
- 子堆栈上下文的堆栈级别为正（最低优先级为第一）。
因为
div::before插入在的内容之前
div，然后插入到的内容
div::after之后，所以当它们以静态位置显示内联时，即使将一个block元素夹在中间，它们也自然会遵循此规则（排序考虑了block
box和inline box） 。
注意，出于明显的原因，通常首先绘制背景，然后将内容覆盖在背景上：
该
p
元素作为块级元素，其背景首先被绘制（＃3）。然后，将内联级伪元素及其背景绘制在背景之上
p
（＃5）。在格式化模型中，它们是p
元素的兄弟姐妹，因此它们都参与div
而不是的堆叠上下文p
。该
div::before
伪元素（包括它的内容和背景）将出现在后面的p
文本，因为它涉及之前p
在视觉树。该
div::after
伪元素（包括它的内容和背景）将出现在前面p
，因为它涉及之后的文本p
在视觉树。
如我的评论所示，如果将伪元素显示为块，则的背景
div::before将隐藏在
p元素的背景之后，而不是文本的后面；相反，的文本
div::before将位于背景和
p元素的文本之间。另请注意，的背景
div::after画在的背景之前
p，而内容则画在最前面。同样，这与在与上述规则相关的内容之前或之后绘制背景有关。
1
在规范的附录E中可以找到更详细的描述。
