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