请看下面一段代码：
<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下显示结果为：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
