html – 不了解pseduo元素的堆叠上下文

这是我的jsfiddle： http://jsfiddle.net/vSJnL/4/

我的#generated div的z-index为1,而伪元素的z-index为-1,但只显示divs文本而不是生成内容之上的div,就像我预期的那样.此外,如果我给伪元素一个正z-index而div给一个更大的z-index,那么< div>仍然是behind the pseudo-element ..

任何人都可以解释为什么会这样吗？

解决方法

假设你的内容不是空的(为了清晰),即内容：“生成”;： http://jsfiddle.net/vSJnL/5/

然后它会呈现如下：

<div id="over">
    <div id="generated">
    Hello World!
    <span>generated</span>
    </div>
</div>

见http://jsfiddle.net/vSJnL/6/

请参阅w3c：http://www.w3.org/TR/CSS21/generate.html#before-after-content中的规范

因此,生成的元素位于文本节点之后生成的div#内,而不是div生成自身之后.

考虑到这一点,堆叠上下文是不言自明的：具有z-index：-1的伪元素成为最低堆叠位置(仅背景是下方的).结果Textnode覆盖了伪元素.