前几天，一学弟问我关于z-index的用法。我就整理整理列出下面一些通用的做法。
关于z-index通俗的讲就是：元素的层叠顺序。一个html显示的文档，除了上下左右，还有前后。前后就是我们所谓的z-index。
z-index的值可以有auto、number，number可以取任何值，当然也包括负数了。z-index值大的元素将在z-index值小的元素之上。另外，也不是所有元素用了z-index就会有效果。z-index属性只适用于定位元素。定位元素即position值设置为absolute、relative、fixed。可能讲的有些抽象，下面我将举几个例子：
（1）
<div style="background:blue;width:100px;height:100px;position:relative;z-index:100">
第一层
</div>
<div style="background:red;width:100px;height:100px;position:relative;top:-50px;z-index:0">
第二层
</div>
可以看到第一层div覆盖了第一层div。因为第一层设置的z-index的值比第二层设置的z-index的值大。
再来看一个例子：
（2）
<div style="background:blue;width:100px;height:100px;position:relative;z-index:100">
第一层
</div>
<div style="background:red;width:100px;height:100px;position:relative;top:-50px;z-index:0">
第二层
<div style="background:green;width:50px;height:60px;position:relative;z-index:200px;">
第三层
</div>
</div>
你会发现无论把第三层的z-index的值设为多大，显示效果还是第一层覆盖了第二层和第三层。这是因为第一层和第二层是兄弟元素，而第二层和第三层为父子元素。z-index值大的兄弟元素会完全覆盖z-index值小的元素及其子元素。
可能大家网上看一些术语是会有点疑惑，当然是针对新手。比如我看到的一则：当任何一个元素层叠另一个包含在不同stacking context元素时，则会以stacking context的层叠级别（stack level）来决定显示的先后情况。也就是说，在相同的stacking context下才会用z-index来决定先后，不同时则由stacking context的z-index来决定。 这里我先介绍下stacking context的意识，堆叠上下文（谷歌翻译）。不过翻译成层叠环境更好，即层叠元素的层叠环境。下面我结合例子（2）来阐述这句话的含义：“在相同的stacking context下才会用z-index来决定先后”。第一层div和第二层div是相对与body的子元素，所以它们拥有相同的stacking context（层叠元素的层叠环境），第一层的z值大与第二层的z值，所以第一层的会覆盖第二层。“不同时则由stacking context的z-index来决定”，现在比较第一层和第三层，因为第三层的层叠环境为第二层，而第一层的层叠环境为相对而言为body。它们有着不同的层叠环境，所以按stacking context（层叠环境）的z-index的值进行，在这里，按第三层的stacking context（层叠环境）的z-index进行层叠。即第二层的z-index，因为第二层的z-index值小于第一层的z-index值。所以第一层还是覆盖了第三层。希望这些对新手的理解有点帮助。
z-index中的bug问题：
（1）观察下面的一段代码：
<div style="position:relative;">
<div style="position:absolute;top:100px;left:210px;width:100px;height:100px;background:blue;z-index:20;">上面</div>
</div>
<div style="position:absolute;top:50px;left:160px;width:100px;height:100px;background:green;z-index:10;">浙江理工大学 阳光网站</div>
按照CSS层叠样式的规则，可以分析出来，应该是出现的效果是这样的：“上面”的层因为z-index的值大于“浙江理工大学 阳光网站”的层的z-index所以应该“上面”层覆盖了“浙江理工大学 阳光网站”的层。可是，我们发现在IE6中绿色的层会覆盖蓝色的层。刚好与我们期望的值相反。这是什么原因呢？这是IE的一个BUG，因为在IE中定位元素的z-index的默认值为0；所以它会产生一个层叠元素的层叠环境，这就可以解释这样的原因了。首先，IE6解析时就把绿色的层，和position值为relative的层归为同一根元素的层叠环境中了，而根据我们上面说的不同层叠元素（position：relative的div和background：green的div）的层叠环境相同时，就由子元素（background：blue的div）的父元素（position：relative的div）的z-index（默认为0）来决定层叠顺序。所以绿色的层覆盖了蓝色的层。
z-index的应用：
还是先解决学弟的问题把，这个问题也是z-index的一大应用之一，即画廊效果。经常上网的人经常看到一张一张照片层叠在一起。也不说废话了，直接上代码了：
（3）<img src="3.jpg" alt="浙江理工大学 阳光网站" style="position:relative;z-index:100" />
<img src="6.jpg" alt="浙江理工大学 阳光网站" style="position:absolute;left:40px;top:40px;filter:alpha(opacity=70);"/></div>
为了效果更明显，我加了透明效果，可以发现第一张照片层叠在最上面了，照片多点效果会更好。
联系客服
