代碼:
<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.官方文檔也沒有介紹這一塊空缺.