这是我的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>
请参阅w3c：http://www.w3.org/TR/CSS21/generate.html#before-after-content中的规范
因此,生成的元素位于文本节点之后生成的div#内,而不是div生成自身之后.
考虑到这一点,堆叠上下文是不言自明的：具有z-index：-1的伪元素成为最低堆叠位置(仅背景是下方的).结果Textnode覆盖了伪元素.
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
