IE6 z-index的bug

关于ie6我一直都是很深恶痛绝的。 我也很想恶骂MS公司。

好了，不扯了说一下如何解决ie6关于z-index的问题。
bug如下：
<div><img style="position:absolute;" src="images/case02.jpg" width="100" height="487" /></div>
<div><img style="position:relative;" src="images/case03.jpg" width="721" height="478" /></div>
像这样的句子，在ie6中，你会发现，上面的case02.jpg会被下面的case03.jpg遮住。

原因在于第一个元素是absolute，而第二个是relative。这时ie6就会认为relative比absolute的z-index高。
所以这时应该把最外层加了absolute的元素上加上z-index:1000（值只要大于0就行）。

如下：
<div><img style="position:absolute; z-index:1000;" src="images/case02.jpg" width="100" height="487" /></div>
<div><img style="position:relative;" src="images/case03.jpg" width="721" height="478" /></div>
当然这里z-index:1也是可以的：
<div><img style="position:absolute; z-index:1;" src="images/case02.jpg" width="100" height="487" /></div>
<div><img style="position:relative;" src="images/case03.jpg" width="721" height="478" /></div>

有一点要注意，一定要是最外层的absolute元素设置z-index：
如下：
<div><div style="position:absolute; z-index:1000;"><img style="position:absolute;" src="images/case02.jpg" width="100" height="487" /></div></div>
<div ><img style="position:relative;" src="images/case03.jpg" width="721" height="478" /></div>

上例中，有两个absolute，我们要加在最外层元素div中，而不能加在img元素中。

如果设置里层的话，那是无效的
如：
<div><div style="position:absolute;"><img style="position:absolute; z-index:1000;" src="images/case02.jpg" width="100" height="487" /></div></div>
<div ><img style="position:relative;" src="images/case03.jpg" width="721" height="478" /></div>

 

我的QQ空间：http://user.qzone.qq.com/499036470