z-index在IE7下兼容解决方案——在不同父级元素环境下

先上效果图

嗯，比较丑，做个实例，样式不重要。实例实现的效果是，鼠标移动到对应的图片出行相关介绍div层，并能盖住其他图片。

实例结构代码：

 <ul id="list">
        <li >
            <div class="first">
                运动员一
            </div>
            <img src="img/1.png" alt="">
        </li>
        <li>

            <div class="first">
                运动员二
            </div>
            <img src="img/2.png" alt="">
        </li>
</ul>

给介绍信息的div层设置z-index:10;在谷歌火狐下能实现效果，但在IE下层级效果没出来，如图：

原因：并不是z-index的值设置的越高都会显示在最前层级，要考虑到父级元素的情况，同父级以及不同父级的情况，这里的实例是不同父级，如果父级设置z-index:2,那么子级设置到999也不会覆盖父级的同级元素，可以理解为它继承父级的z-index:2；

解决方案：提高父级的z-index值，本实例中，期望达到的效果是，鼠标移动到对应的父级li，它的z-index能高于其他父级li，那么在鼠标onouseover方法里面加上

this.style.zIndex='999'即可解决。

  for(var i=0;i < Oli.length;i++){
                Oli[i].onmouseover=function(){
                    this.style.zIndex='999';
}

当然还要有鼠标移出，要清空掉999的操作，否则当鼠标再次移入就不能再次出现预期效果。