::在伪元素堆栈顺序问题之前

静态定位时，:: before伪元素堆栈（z-index）在子元素的内容之前，但是在子元素的后面。 任何人都可以解释为什么，甚至是如何发生这种情况，或者如果这是所有主stream浏览器的问题？

<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

包含两个伪元素和p元素的div的内容参与相同的堆栈上下文（相对于div ）。 这是因为，你们注意到，他们三个都是静态定位的。 换句话说，根本没有定位。 （是的，这些元素在stream中时沿着z轴堆叠;您不能使用z-index来操作堆栈层次，因为它们没有定位。）

以下是各部分绘制顺序的总结 ¹ ，与您的问题相关的大胆重点：

每个盒子都属于一个堆叠环境 。 给定堆叠上下文中的每个定位框都有一个整数堆栈层 ，它是在相同堆栈上下文中相对于其他堆栈层的z轴上的位置。 具有较高堆栈级别的框始终格式化在较低堆栈级别的框之前。 盒子可能有负面的堆叠水平。 根据文档树的顺序，在堆叠上下文中具有相同堆栈级别的框被堆叠起来。

在每个堆叠环境中，以下图层按照先后顺序绘制：

1. 构成堆叠上下文的元素的背景和边界。
2. 孩子堆叠负面的堆栈水平的情况下（最负面的第一）。
3. 在线的，非在线的，非定位的后代。
4. 未定位的浮游物。
5. 包含行内表和行内块的stream入式，内联式，非定位后代。
6. 子级堆栈0的堆栈上下文和堆栈级别0的定位后裔。
7. 孩子堆叠积极的堆叠水平的情况下（最不积极的第一）。

由于div::before是在div的内容div::before插入的，而div::after是在它div::after插入的，所以当它们以静态方式内联显示时，它们自然会遵循这个规则，即使夹住一个block元素考虑到块盒和内联盒）。

请注意，由于显而易见的原因，背景通常首先被绘制，内容覆盖它们：

1. p元素作为块级元素，具有先画的背景（＃3）。

2. 内联级别的伪元素然后在背景上绘制背景（＃5）。 在格式化模型中，它们是p元素的兄弟，所以它们都参与div的堆栈上下文，而不是p的堆栈上下文。

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

4. div::after伪元素（包含它的内容和背景）出现在p文本的前面，因为它在可视化树中的p之后。

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

---

¹ _{更详细的描述可以在规范的附录E中find。}