请看下面一段代码:
<html>
<head>
<script type="text/javascript">
function displayTip(){
document.getElementById("tipMessage").style.display = "block";
}
function unDisplayTip(){
document.getElementById("tipMessage").style.display = "none";
}
</script>
</head>
<body>
<div style="position:relative;">
<a onmouseover="displayTip();" onmouseout="unDisplayTip();" href="#"> just here!
</a>
<div id="tipMessage" style="position:absolute;z-index:9;display:none;width:250px;left:100px;">
这条信息在IE6下会被右边的图片遮住,在firefox下可以正常显示。
</div>
</div>
<div style="position:relative;">
<div style="position:absolute;z-index:1;left:200px;top:-20px;">
<img src="8.jpg"/>
</div>
</div>
</body>
</html>
在IE6下的显示结果为:
在FF下的显示结果为:
很明显,在IE6下,z-index属性不起作用了,尽管tipMessage这个div的z-index属性值大于img的z-index属性值。
那么为什么z-index为9的div在IE下反而显示在z-index为1的img下面呢?
就是因为IE不自动识别relative的深度的问题
,也就是说默认值就是他们的出现顺序。
所以把上面的一段代码改为如下所示就可以了:
<div style="position:relative;z-index:2;">
<a onmouseover="displayTip();" onmouseout="unDisplayTip();" href="#"> just here! </a>
<div id="tipMessage" style="position:absolute;z-index:9;display:none;width:250px;left:100px;">
这条信息在IE6下会被右边的图片遮住,在firefox下显示正常。
</div>
</div>
IE6下显示结果为: