&nbs p;
一、匆匆带过的概念
关于 CSS 中层级 z -i ndex 的定义啊什么的不是本文的重点，不会花费过多篇幅详细讲述。这里就 简单 带过， z-index 伴随着层的概念产生的。网页中，层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的 应该 知道 ，层级越高（ 图层 越靠上），越在上面显示，如果层发生重叠，层级高的会覆盖层级低的，如果非透明或 半 透明，则会遮挡。
在P hotoshop中，层的高低就是靠手动调的，鼠标拖拽，或是ctrl+]或是ctrl+shift+[快捷键 改变 层的次序。如下图，鼠标拖移改变层次序的 过程中 ：
在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。
在CSS中，显然，只能通过代码改变层级，这个属性就是 z-index ，要让 z-index 起作用有个小小前提，就是元素的 pos IT ion 属性要是 relative ， absolute 或是 fixed 。就像生孩子一样，一个人不顶用，需要配合。下为 z-index 的 业余 示意图：
按照 正常 的 思维 ， z-index 层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到IE6，这家伙，估计是后妈带大的，从小营养不良，结果后来 健康 问题一堆又一堆。z -index 的问题就是其中之一，而本文就是要讲讲这个IE6下 z-index 不起作用的问题。
二、关于效果截图的些必要说明
下面的不是废话，是为了更容易的理解我下面唾沫横飞的内容。
以下所有结果截图的大背景如下：
1、页面上固定不动的，一成不变的，送豪宅也不会从良的是一个黑色背景，透明度 40% ，几乎满屏显示的层级为1的绝对定位层。 HTML 为：
<div id="blank"></div>
对应CSS为：
# blank{width:100%; h ei ght: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 属性（不包括 stat ic ）；
3、问题标签含有浮动( float )属性。
您可以拿下面的代码自己做个简单测试：
<div id="blank"></div> <div style="position:relative; z-index:9999;"> < img style="float:left;" src="mm2. jpg " /> </div>
丫的，这 z-index 都 9999 了，层级够高吧，但是，看下面的图：
这一对比就知道问题了，可能有人会疑问，这会不会是IE6的 relative 自己感冒了，而不是浮动( float )携带了“甲流病毒”。好，我现在去掉浮动，HT ML 代码如下：
<div id="blank"></div> <div style="position:relative; z-index:9999;"> <img src="mm2.jpg" /> </div>
结果IE6下：
您可以狠狠地点击这里：在线demo测试
我想，问题应该都清楚了，至于原因，我起初以为是 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代码：
<div id="blank"></div> <div style="position:relative;"> <div style="position:relative; z-index:1000;"> <div style="position:absolute; z-index:9999;"> <img src="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="mm3.jpg" /> </div> </div> </div>
结果IE6童鞋喜笑颜开，春光灿烂：
您可以狠狠地点击这里：改变父标签层级在线demo测试
五、必要的结语
老实讲，我对 z-index 研究的精力其实比较有限，本文的两个bug研究都属于停留在表层的。 z-index 这玩意深不可测，里面所蕴含的知识不是CSS手册上的那点东西，那只是冰山一角。这涉及到 border 及 background 的 堆叠 模型，涉及到同层级的显示问题，以及浏览器显示的些机制等，这是很深的一潭水。
总之，慢慢来，慢慢 积累 ，慢慢研究，一定会一步一步揭开 z-index 的本质面纱的。
（本篇完）
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-IE6下z-index犯癫不起作用bug的初步研究 全部内容，希望文章能够帮你解决 html5教程-IE6下z-index犯癫不起作用bug的初步研究 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-IE6下z-index犯癫不起作用bug的初步研究的详细内容...