IE6 下z-index失效Bug解决方法

首 先我是这样处理，所有a标签z-index都为10，经过弹出层z-index为20,当前a标签z-index为30,这样在chrome、firefox、ie98都达到了预期的效果（设置z-index的过程当然要顺便设置position这个东西，如果你有先看过网上的文章也会知 道。）

在首次完成后ie67并不兼容，也就是你现在所看到的demo（你可以放到ie67里看看），经过弹出层被其他a标签遮住了。 按照平时的惯例依照直觉z-index:9999；position:relative;zoom:1各种各样的属性都用上了，这个层还是死死的躺在其他a标签下面。
没办法，看来乱碰撞不能解决问题，只能用理性去剥开ie6下z-index的沉沦原因。据我所知（不知道什么时候记住的）ie6下的z-index比较是看他们的老大（父级）的比拼，也就是说谁的老大高级（z-index），往往它们也就跟着上位了。

按 着刚才描述的逻辑去思考这个demo在ie67下的问题，目前所有a标签都是同级（z-index:10；），也就是说所有堂口的老大都是10级的，他 们的小弟肯定不会大过他们，这样想来难怪经过弹出层在其他a下面了，鉴于这种情况，我只能把当前a标签的老大li再提高一个级别，使鼠标经过的当前a标签 以及弹出层整体提高一个档次，这样就不会给其他a标签遮住了。

在CSS中，显然，只能通过代码改变层级，这个属性就是z-index，要让z-index起作用有个小小前提，就是元素的position属性要 是relative，absolute或是fixed。就像生孩子一样，一个人不顶用，需要配合。下为z-index的业余示意图：

 
按照正常的思维，z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6，这家 伙，估计是后妈带大的，从小营养不良，结果后来健康问题一堆又一堆。z-index的问题就是其中之一，而本文就是要讲讲这个IE6下z-index不起 作用的问题。

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

下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下：
1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度40%，几乎满屏显示的层级为1的绝对定位层。HTML为：

，对应CSS为：#blank{width:100%; 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)属性。
您可以拿下面的代码自己做个简单测试：

代码如下	复制代码

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

 

 

 

这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，HTML代码如下：

代码如下	复制代码

结果IE6下：

 
我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7下无此bug也证明不是 haslayout的原因），似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为 absolute可以解决这一问题，我就怀疑是不是浮动让relative发生了些变化，float与relative在水平定位上可以说是近亲，会不会 是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已，真正的原因还是去问IE6的后妈吧。

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

四、固执的IE6：它只认第一个爸爸
可能不少人知道，这IE6下，层级的高低不仅要看自己，还要看自己的老爸这个后台是否够硬。用术语具体描述为：
父标签position属性为relative或absolute时，子标签的absolute属性是相对于父标签而言的。而在IE6下，层级的表现有时候不是看子标签的z-index多高，而要看它们的父标签的z-index谁高谁低。

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

好，下面展示这个bug。

条件很简单，只要绝对定位的第一个元素的第一个爸爸，或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码：

代码如下	复制代码

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

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

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

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

代码如下	复制代码

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

 
您可以狠狠地点击这里：改变父标签层级在线demo测试

五、必要的结语
老实讲，我对z-index研究的精力其实比较有限，本文的两个bug研究都属于停留在表层的。z-index这玩意深不可测，里面所蕴含的知识不是 CSS手册上的那点东西，那只是冰山一角。这涉及到border及background的堆叠模型，涉及到同层级的显示问题，以及浏览器显示的些机制等， 这是很深的一潭水。