透明度引发的层级关系

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

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

Demo1

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

.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;}

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

透明度-层级关系01

透明度-层级关系01-ie6

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

Demo2

如果我们把元素a也设置透明度,并且透明值0.9呢?
.a{background:#390;opacity:0.9;filter:alpha(opacity=90);}

透明度-层级关系02

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

Demo3

因为在正常情况下,只有定位元素才能控制层级关系。于是我们取消元素a的透明度,设置它为定位元素:
.a{background:#390;position:relative;}
效果如下:

透明度-层级关系03

我们可以看到,元素a仍然在b的下方。可是当我们将元素a的z-indx设置为1.
.a{background:#390;position:relative;z-indx:1;}
却出现下图的效果:

透明度-层级关系04

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

评论功能已关闭。