z-index 在 IE 里无法完全发挥作用，问题出在哪里呢？

在FF里，正常：
点击按钮后，那张大一点的图，会浮动到上面
但是在ＩＥ不行，点了按钮以后并不会动。不管我把　zIndex 的值设定为多大，都不行。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>Hoverbox Image Gallery</title>
<style>
*{
margin:0;
padding:0;
}
body{
margin:40px;
}
div{
position:relative;
float:left;
width:116px;
height:91px;
}
a img{
border:1px solid #555;
background-color:#aaa;
padding:4px;
margin:8px;
width:100px;
height:75px;
}
#img1{
position:absolute;
left:0px;
top:0px;
}
</style>
<script>
function changeStackOrder(){
document.getElementById("img1").style.zIndex="2";
document.getElementById("img1").style.display="block";
}
</script>
</head>
<body >
<div><img id="img1" src="img/photo01.jpg"></div>
<div><a href="#"><img src="img/photo01.jpg" /></a></div>
<div><a href="#"><img src="img/photo02.jpg" /></a></div>
<div><a href="#"><img src="img/photo03.jpg" /></a></div>
<div><a href="#"><img src="img/photo04.jpg" /></a></div>
<div><a href="#"><img src="img/photo05.jpg" /></a></div>
<div><a href="#"><img src="img/photo06.jpg" /></a></div>
<div><a href="#"><img src="img/photo07.jpg" /></a></div>
<div><a href="#"><img src="img/photo08.jpg" /></a></div>
<div><a href="#"><img src="img/photo09.jpg" /></a></div>
<div><a href="#"><img src="img/photo10.jpg" /></a></div>
<div style="clear:both;"><br /><input type="button" onclick="changeStackOrder()" value="Change stack order" /></div>
</body>
</html>

解决方案 »

  1.   

    楼主先用css样式设置为死的比如 position:absolute;
    z-index:1000;看看有没有效果，我怀疑你没有设置position的属性，如果有效果，就证明你的js写的有问题，你可以先设置position的属性，再设置高度
      

  2.   


    设置什么元素的position属性呢？
      

  3.   

    IE7及更早版本对z-index的解析有个讨厌的Bug，如果父元素具有position: relative;属性，那么只设置子元素的z-index是不起作用的，父元素也得一起设置。也就是说你的#img和它上层的DIV都必须要有z-index才行。
    你这里简单的可以这么改
    <div id="img1"><img src="img/photo01.jpg"></div>
      

  4.   


    父元素（上层div）也设定z-index后也不行。倒是<div id="img1"><img src="img/photo01.jpg"></div>这个方法可以行得通。
      

  5.   

    这个问题的根源就是父元素上有position: relative;，如果改了父元素的z-index应该是行得通的，不知道你是怎么写的？
      

  6.   

    照你原来的写法
    <div><img id="img1" src="img/photo01.jpg"></div>
    我把函数改成function changeStackOrder(){
    var img = document.getElementById("img1");
    img.style.zIndex="2";
    img.parentNode.style.zIndex = "2";
    img.style.display="block";
    }这样也是可以的