这是一个我不太了解的关于z-index和css伪元素:: before / :: after的行为.
它在这个jsfiddle:http://jsfiddle.net/jgoyon/T6QCf/上有说明
我创建了一个定位框并使用:: after伪元素添加内容(也定位).
>如果我将一个z-index设置为:: after伪元素,一切都运行良好我可以通过播放z-index将其放在父节点之上或之下
#no-z-index { background:lightblue; width:100px; height:100px; position:relative; } #no-z-index:after { content: 'z-index -1'; width:50px; height:50px; background:yellow; position:absolute; z-index:-1; /* z-index in question */ top:70px; left:70px; }
>如果我这样做并设置父级的z-index,它就不再起作用了.
#z-index { background:lightblue; left:200px; width:100px; height:100px; position:relative; z-index:0; /* parent z-index */ } #z-index:after { content: 'z-index -1'; width:50px; height:50px; background:yellow; position:absolute; z-index:-1; /* z-index in question */ top:70px; left:70px; }
这是预期的行为吗?