近日，小码哥遇到一个在IE6下z-index属性失效问题！让鄙人纠结了好半天。心里那个不爽啊！最终虽然解决了俺遇到的问题，同时也做出了如下小结：（希望对“码上赚钱”的侬有所帮助）。

其实z-index属性在标准浏览器下其属性值完全按照大小来衡量谁上谁下的。但是在这个各种浏览器横行的年代，又遇到万恶而变态的IE、7时。很多问题就接踵而至了。

在IE6、7下针对z-index属性的问题，最常遇到的就是不管对z-index设置多高的值，哪怕是其父级元素的十倍百倍，该层级不显示还是不显示。那么到底是哪些原因造成的呢？

鄙人总结如下：（以上纯属扯淡，只为博君腹诽！）

1. 当前层有与浮动float相关的属性时。

2. 当前层有与浮动float相关以及与定位相关的position属性时。此两个属性在CSS中算是近亲，都有脱离文本流的作用。

3. 当前层以及当前层的父级层有position属性时。

由于鄙人对CSS还不很精通，仅仅略知皮毛。故以上三种情况是在下总结的原因，至于根本原因，还有待考证。如果你遇到了相关问题，不防注意以上三种可能。

下面是解决办法：

1. 若是当前层的浮动属性不是必须能去掉则去掉。

2. 若是浮动问题不能去掉，则考虑position属性的相对或绝对关系。变换position属性的值。

3. 避免相邻父子层出现父级position：relative；而子级（当前层）position：absolute；如出现此种情况，可把父级的position属性去掉，改为子级（当前层）针对其祖父级或根节点的相对定位。也就是在其祖父级或以上级添加position：relative；

以上就是相关解决办法，也不是绝对的。需要因情况而定！

本文出自 “关注技术专注前端” 博客，请务必保留此出处http://oxoxo.blog.51cto.com/9301862/1547709

IE6下 CSS z-index属性失效原因浅析