该属性用于解决定位过程中会出现的层级问题。
<!-- “黑块” 和 “白块” 都定位到 “橙块” 的左上角，默认情况下 “白块” 的显示优先级比 “黑块” 高，所以 “黑块” 被 “白块” 覆盖了 -->
<div style="width:200px; height:200px; background: orange; position: relative;">
<div style="width:100px; height:100px; background: #333; position:absolute; left:0px; top:0px;"></div> <!-- 黑块 -->
<div style="width:100px; height:100px; background: #fff; position:absolute; left:0px; top:0px;"></div> <!-- 百块 -->
</div>
<!-- z-index 设置优先级别 -->
<div style="width:200px; height:200px; background: orange; position: relative;">
<div style="width:100px; height:100px; background: #333; position:absolute; left:0px; top:0px; z-index: 2;"></div> <!-- 黑块 z-index: 2; -->
<div style="width:100px; height:100px; background: #fff; position:absolute; left:0px; top:0px; z-index: 1;"></div> <!-- 百块 z-index: 1;-->
</div>默认效果
设置了 z-index