IE6 z-index 无效

一、概念

网页中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道，层级越高（图层越靠上），越在上面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或半透明，则会遮挡。

在photoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图，鼠标拖移改变层次序的过程中：

在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。

在CSS中，

Z-index属性决定了一个HTML元素的层叠级别。元素层叠级别是相对于元素在Z轴上（与X轴Y轴相对照）的位置而言。一个更高的Z-index值意味着这个元素在叠层顺序中会更靠近顶部。这个层叠顺序沿着垂直的线轴被呈现。

了解Z-index ：全透视：CSS Z-index 属性

本文要讲这个IE6下z-index不起作用的问题。

 

二、关于效果截图的些必要说明

以下所有结果截图的大背景如下：

1、页面上固定不动的一个黑色背景，透明度40%，几乎满屏显示的层级为1的绝对定位层。

HTML为：<div id="blank"></div>

对应CSS为：#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看：

这说明内容在z-index为1的绝对定位层之下。

这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z-index不起作用有很直观的认识了。

三、IE6的抱怨：浮动让我沉沦

首先讲讲第一种z-index无论设置多高都不起作用情况。

这种情况发生的条件有三个：

1、父标签 position属性为relative；

2、问题标签无position属性（不包括static）；

3、问题标签含有浮动(float)属性。

您可以拿下面的代码自己做个简单测试：

<div id="blank"></div>

<div style="position:relative; z-index:9999;">

<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />

</div>

丫的，这z-index都9999了，层级够高吧，但是，看下面的图：

现在去掉浮动，HTML代码如下：

<div id="blank"></div>
<div style="position:relative; z-index:9999;">
 <img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />
</div>

结果IE6下：

将外部div的position:relative属性改为 absolute可以解决这一问题

解决方法有三，1、position:relative改为position:absolute；2、去除浮动；3、浮动元素添加position属性（如relative，absolute等）。

四、固执的IE6：它只认第一个爸爸
用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

但是，相信这里面很多人不知道IE6下，决定层级高低的不是当前的父标签，而是整个DOM tree（节点树）的第一个relative属性的父标签。有时平时我们多处理一个父标签，z-index层级多而复杂的情况不多见，所以难免会有认识上的小小偏差。

 

例如下面的HTML代码：

<div id="blank"></div>
<div style="position:relative;">
 <div style="position:relative; z-index:1000;">
        <div style="position:absolute; z-index:9999;">
         <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
        </div>
    </div>
</div>

可以看到，mm3图片的父标签div 是绝对定位，层级9999，比1大多了，绝对定位的父标签层级1000(10000也一样)，也比黑色半透明层的z-index:1大多了，但是，我们可怜的IE6童鞋——

再看看以Firefox为代表的其他童鞋：

IE7与IE6有着同样的bug，原因很简单，虽然图片所在div当前的老爸层级很高(1000)，但是由于老爸的老爸不顶用，可怜了9999如此强势的孩子没有出头之日啊！

知道原因解决就很轻松了，给第一任老爸添加z-index后的HTML代码如下：

<div id="blank"></div>
<div style="position:relative; z-index:1;">
 <div style="position:relative; z-index:1000;">
        <div style="position:absolute; z-index:9999;">
         <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />
        </div>
    </div>
</div>

结果IE6童鞋喜笑颜开，春光灿烂：

 

五、必要的结语
z-index这玩意深不可测，里面所蕴含的知识不是 CSS手册上的那点东西，那只是冰山一角。这涉及到border及background的堆叠模型，涉及到同层级的显示问题，以及浏览器显示的些机制等， 这是很深的一潭水。