ie6 z-index不起作用的完美解决方法( 二 ) _云知道

解决方法有三，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童鞋

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的堆叠模型，涉及到同层级的显示问题，以及浏览器显示的些机制等，这是很深的一潭水。
【ie6 z-index不起作用的完美解决方法】以上这篇ie6 z-index不起作用的完美解决方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。