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 .. 任何人 这是我的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覆盖了伪元素.

总结

以上是内存溢出为你收集整理的html – 不了解pseduo元素的堆叠上下文全部内容，希望文章能够帮你解决html – 不了解pseduo元素的堆叠上下文所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。