当父元素设置了position属性并且设置了背景颜色,子元素设置了position:absolute和z-index:-1,子元素将会在父元素的层级背后不可见。
<style>
/*父元素无z-index值,子元素z-index设为负值将不可见*/
.box { position:relative; top:0; left:0; width:100px; height:100px; background-color:#666;}
.box .sub {position:absolute; z-index:-1; width:10px; height:10px; top:0; left:0; background-color:#fff;}
</style>
<div class="box">
<div class="sub"></div>
</div>
如果在父元素样式里加上z-index值,子元素的z-index的负数值将会失效,状态变为可见。
<style>
/*父元素有z-index值,子元素z-index设为负值将可见*/
.box { position:relative; top:0; left:0; z-index:1; width:100px; height:100px; background-color:#666;}
.box .sub {position:absolute; z-index:-1; width:10px; height:10px; top:0; left:0; background-color:#fff;}
</style>
<div class="box">
<div class="sub"></div>
</div>