IE6下z-index经常不起作用bug的细分析
这是一个在鑫空间里转过来一篇文章，作者写的很详细，很给力，不感独享。
一、匆匆带过的概念
关于CSS中
在flash中，类似，可以手动改变图层次序，或是使用as脚本，例如：容器对象.setChildIndex(显示对象,0)就是让对象底层显示，而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。
在CSS中，显然，只能通过代码改变层级，这个属性就是
按照正常的思维，z-index层级越高，内容越应该在上面显示。在大部分的浏览器在大部分的情况下，确实如此，但是不绝对。尤其遇到
这说明内容在z-index为1的绝对定位层之下。
这说明内容在z-index为1的绝对定位层之上。
2、页面上做对比的是美女图片，图片在半透明黑色绝对定位层的上面还是下面很容易辨别，这样，您就能够对我所说的z-index不起作用有很直观的认识了。
三、
这一对比就知道问题了，可能有人会疑问，这会不会是IE6的relative自己感冒了，而不是浮动(float)携带了“甲流病毒”。好，我现在去掉浮动，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下：
您可以狠狠地点击这里：在线demo测试
我想，问题应该都清楚了，至于原因，我起初以为是haslayout搞的鬼，后来，用zoom一测试，发现不是（IE7下无此
再看看以
IE7与IE6有着同样的
知道原因解决就很轻松了，给第一任老爸添加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童鞋喜笑颜开，春光灿烂：
您可以狠狠地点击这里：改变父标签层级在线demo测试
五、必要的结语
老实讲，我对z-index研究的精力其实比较有限，本文的两个bug研究都属于停留在表层的。z-index这玩意深不可测，里面所蕴含的知识不是CSS手册上的那点东西，那只是冰山一角。这涉及到border及background的堆叠模型，涉及到同层级的显示问题，以及浏览器显示的些机制等，这是很深的一潭水。
总之，慢慢来，慢慢积累，慢慢研究，一定会一步一步揭开z-index的本质面纱的。
原创地址：http://www.zhangxinxu.com/wordpress/?p=471
