CSS postion中z-index负值的应用

当父元素设置了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>