关于伪元素::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.官方文档也没有介绍这一块空缺.

转载于:https://www.cnblogs.com/Aniumei/p/6104287.html