关于伪元素::before&::after的z-index问题研究。待续...

代码:

<div id="test"></div>
/*情况1:#test不使用z-index*/
#test{width:120px;height: 60px;background:#bcbcbc;position: absolute; left: 200px;/*z-index:0;*/}
/*情况2:#test使用固定定位*/
#test{width:120px;height: 60px;background:#bcbcbc;position: fixed; left: 200px;/*z-index:0;*/}
/*情况3:#test使用z-index*/
#test{width:120px;height: 60px;background:#bcbcbc;position: absolute; left: 200px;z-index:0;}

#test::before{
    content:'';
    display: block;
    width:60px;height: 60px;background: #333;
    position: absolute;
    left:-20px;
    top:5px;
    z-index: -1;
}
#test::after{
    content:'';
    display: block;
    width:60px;height: 60px;background: #333;
    position: absolute;
    right:-20px;
    top:5px;
    z-index: -1;
}

效果图:

情况1效果

情况2和情况3的效果一样

那么,问题来了

1.为什么伪元素的父元素使用z-index之后,伪元素的z-index失效.

2.为什么伪元素的父元素使用fixed之后,即使不使用z-index,伪元素的z-index失效.

3.官方文档也没有介绍这一块空缺.

posted @ 2016-11-26 15:19  Aniumei  阅读(2370)  评论(0编辑  收藏  举报