關於偽元素::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