你的位置:首页 > 网页设计

[网页设计]关于伪元素::before::after的z

代码:

<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.官方文档也没有介绍这一块空缺,国内外谁能给出一个合理的答案?