auto:默认值。遵从其父对象的定位
number:无单位的整数值。可为负数
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
假设有如下HTML结构：
<div class=”father position_r”>
<div class=”child position_a” id=”box_red”>(z-index: 30;)
<div class=”subChild” id=”subChild_tl”>(z-index: auto;)
我是红色大盒子的子盒子</div>
<div class=”subChild” id=”subChild_bl”>(z-index: 29;)
我是红色大盒子的子盒子</div>
<div class=”subChild” id=”subChild_br”>(z-index: 9;)
我是红色大盒子的子盒子</div>
<div class=”subChild” id=”subChild_extra1″>
(z-index: -1000;)
我是红色大盒子的子盒子</div>
</div>
<div class=”child position_a” id=”box_green”>(z-index: 10;)
<div class=”subChild” id=”subChild_extra2″>
(z-index: 2000;)
我是绿色大盒子的子盒子</div>
</div>
<div class=”child position_a” id=”box_blue”>(z-index: 20;)
<div class=”subChild” id=”subChild_extra3″>
(z-index: 1000;)
我是蓝色大盒子的子盒子</div>
</div>
</div>
添加如下样式：
.position_r { position: relative; }
.position_a { position: absolute; }
#box_red { background: red; z-index: 30; top: 100px; left: 100px; }
#box_green { background: green; z-index: 10; top: 200px; left: 200px; }
#box_blue { background: blue; z-index: 20; top: 300px; left: 300px; }
.subChild { width: 100px; height: 100px; text-align: left; position: absolute; }
#subChild_tl { background: green; top: -50px; left: -50px; z-index: auto; }
#subChild_bl { background: blue; bottom: 0px; left: 0px; z-index: 29; }
#subChild_br { background: red; bottom: -50px; right: -50px; z-index: 9; }
#subChild_extra1 { background: maroon; width: 150px; height: 150px; top: 20px; right: 20px; z-index: -1000; }
#subChild_extra2 { background: orange; width: 150px; top: 80px; left: -70px; z-index: 2000; }
#subChild_extra3 { background: gold; top: 30px; left: -25px; z-index: 1000; }
效果截图：
