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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM