伪元素的z索引行为 [英] z-Index behaviour on pseudo elements

问题描述

请参阅：

http://jsfiddle.net/Kq2PY/

div与z-index 5是相对的，而：after事物对于z-index 2是绝对的。

  div {
 position：relative; 
 z-index：5； 
背景：＃000； 
 padding：10px; 
} 
 
 div：之后{
内容：’’； 
头寸：绝对； 
 z-index：2； / *< =不工作:( * / 
背景：＃3d3; 
左：20px; 
顶：20px; 
宽度：30px; 
高度： 30px; 
}  

 < div> erferf< ; / div>  

解决方案

必须为伪元素赋予负的z-index值，以使其位于其父级之后，再删除父级上的z-index
http://jsfiddle.net/jklm313/Kq2PY/4/

  div {
 position：relative; 
 background：＃000; 
 padding：10px; 
} 
 
 div：after {
 content：''; 
位置：绝对; 
 z-index：-1; / *< =不国王:( * / 
背景：＃3d3; 
左：20px； 
 top：20像素； 
宽度：30px； 
高度：30像素； 
}  

 < div> erferf< / div>  

see:

http://jsfiddle.net/Kq2PY/

the div is relative with z-index 5, and the :after thing is absolute with z-index 2.

So shouldn't :after be behind the 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>

解决方案

You would have to give pseudo elements a negative z-index to get it to go behind it's parent, plus remove the z-index on the parent. 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>

这篇关于伪元素的z索引行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！