::之前的伪元素堆叠顺序问题

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,因为他们没有位置.)

以下是绘制各个部分的顺序的摘要¹,粗体强调与您的问题相关的部分:

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

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

1. 形成堆叠背景的元素的背景和边界.
2. 子堆叠上下文与负堆栈级别(最负面的).
3. 流入的,非内联级别,非定位后代.
4. 未定位的花车.
5. 流入的,内联级的,未定位的后代,包括内联表和内联块.
6. 堆栈级别为0的子堆栈上下文和堆栈级别为0的已定位后代.
7. 堆叠具有正堆栈级别的子堆栈(最少积极的第一个).

因为div::before插入到内容之前div,并且div::after在它之后插入,当它们在静态位置内联显示时,它们自然会遵循这个规则,即使将块元素夹在中间(排序也考虑了块框和内联框) .

请注意,出于显而易见的原因,通常首先绘制背景,内容覆盖它们:

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,而内容是最前面的.同样,这与在上述规则相关的内容之前或之后绘制的背景有关.

¹ _{更详细的描述可以在规范的附录E中找到.}