我们知道，在正常的文档流中，越往后的元素，层级越高、而子元素也比父元素的层级高。但当元素脱离文档流时，我们可以通过设置元素的z-index来定义元素的层级，而无需再顾忌元素的前后顺序。

以上都是很理所当然的，但如果给元素设置透明度，没有脱离文档流，各元素的层级还会这样吗？

Demo1

不如我们做个demo来测试一下吧！在demo中，我们设置三个元素（依次a,b,c），我们把b元素的透明度设置0.8。因win7的ie6不支持透明度，我们利用browserstack来在线测试。相关代码和效果图如下：

<style>
.box{width:100px;height:100px;}
.a{background:#390;}
.b{margin-left:20px;margin-top:-20px;background:#966;opacity:0.8;filter:alpha(opacity=80);}
.c{margin-left:40px;margin-top:-40px;background:#F30;}
</style>

<div class="box a"></div>
<div class="box b"></div>
<div class="box c"></div>

在普通浏览器下：

在ie6下：

我们发现，b元素的层级会比c元素高，但ie6却无此现象。

Demo2

如果我们把元素a也设置透明度，并且透明值0.9呢？

.a{background:#390;opacity:0.9;filter:alpha(opacity=90);}

我们发现元素a仍然被元素b覆盖。于是我们可以猜想透明度可以引发层级关系改变，并且这种改变与透明度的值无关。

Demo3

因为在正常情况下，只有定位元素才能控制层级关系。于是我们取消元素a的透明度，设置它为定位元素：

.a{background:#390;position:relative;}

效果如下：

我们可以看到，元素a仍然在b的下方。可是当我们将元素a的z-indx设置为1.

.a{background:#390;position:relative;z-indx:1;}

却出现下图的效果：

最后我们可以总结，若元素的透明度设置为小于1，它的层级关系将发生改变，并且这种层级的高低与透明的值无关（无论是0.9还是0.8）。这种层级效果类似元素设置了定位属性，但未设置z-index，或者说它的z-index为默认值0或auto。