css - 伪元素上的 z-Index 行为

Question

看：

http://jsfiddle.net/Kq2PY/

div 与 z-index 5 是相对的， :after 与 z-index 2 是绝对的。

那么 :after 不应该在 div 后面吗？

div{
    position:relative;
    z-index: 5;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: 2;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}    

<div>erferf</div>

Answer 1

您必须给伪元素一个负 z-index 以使其落后于其父级，并删除父级上的 z-index。 http://jsfiddle.net/jklm313/Kq2PY/4/

div{
    position:relative;
    background: #000;
    padding: 10px;
}    

div:after{
    content: '';
    position: absolute;
    z-index: -1;            /*  <= not working:( */
    background: #3d3;
    left: 20px;
    top: 20px; 
    width: 30px;
    height: 30px;
}    

<div>erferf</div>

Answer 2

div { z-index: 1; }

div::after { z-index: -1;}