IE7-同级元素relative定位，子元素absolute定位z-index失效
IE7-下，同级元素使用relative定位时，如果子元素使用absolute定位，这个absolute定位的子元素会被处于这个元素的父元素的后面的同级元素所覆盖，导致z-index无效（一般解决IE7- z-index失效的问题主要是给父元素增加z-index），示例代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>IE7- 同级元素relative定位，子元素absolute定位z-index失效</title>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<style>
.gwtWrapInner{margin-top:34px;padding-bottom:65px;}
.gwtWrapInner ul li{float:left;width:137px;height:137px;position:relative;list-style:none}
.gwtWrapInner ul img{width:100%;}
.gwtIntro{position:absolute;top:0;left:137px;z-index:100;height:137px;width:274px;background-color:#7b287e}
.gwtIntro p{margin-left:24px;margin-right:24px;margin-top:20px;font-size:12px;color:#ffe8a1;line-height:20px;}
</style>
<div class="gwtWrapInner">
<ul class="clearfix">
<li>
同级元素下的其他非absolute定位元素<img src="http://avatar.csdn.net/5/8/A/1_z284122755.jpg">
<div class="gwtIntro" style="display:none"><p>相对于父元素(relative定位)absolute定位的元素<br />相对于父元素(relative定位)absolute定位的元素</p></div>
</li><li>
同级元素下的其他非absolute定位元素<img src="http://avatar.csdn.net/5/8/A/1_z284122755.jpg">
<div class="gwtIntro" style="display:none"><p>相对于父元素(relative定位)absolute定位的元素<br />相对于父元素(relative定位)absolute定位的元素</p></div>
</li>
<li>
同级元素下的其他非absolute定位元素<img src="http://avatar.csdn.net/5/8/A/1_z284122755.jpg">
<div class="gwtIntro" style="display:none"><p>相对于父元素(relative定位)absolute定位的元素<br />相对于父元素(relative定位)absolute定位的元素</p></div>
</li>
</ul>
</div>
<script>
window.onload = function () {
$(".gwtWrapInner ul li").mouseenter(function () {
$(this).children("div.gwtIntro").show();
});
$(".gwtWrapInner ul li").mouseleave(function () {
$(this).children("div.gwtIntro").hide();
});
}
</script>
IE7-效果图，absolute定位的层被覆盖了
IE8+和标准浏览器如firefox效果如下
要解决IE7- relative/absolute定位导致的覆盖问题，有两种办法
1）增加:hover伪类，同级元素默认static定位，获取焦掉的同级元素才是relative定位，不过在ie6-下:hover伪类对于非a元素无效。
.gwtWrapInner ul li{float:left;width:137px;height:137px;list-style:none}
.gwtWrapInner ul li:hover{position:relative;}
2）用js依次设置同级父元素的z-index，逐渐减少，同级父元素还是relative定位
window.onload = function () {
//////////////////////设置z-index逐渐减少，这样就可以覆盖住
var liindex = 999;
$(".gwtWrapInner ul li").each(function (index, el) { $(this).css('z-index', liindex--); })
//////////////////////
$(".gwtWrapInner ul li").mouseenter(function () {
$(this).children("div.gwtIntro").show();
});
$(".gwtWrapInner ul li").mouseleave(function () {
$(this).children("div.gwtIntro").hide();
});
}
加支付宝好友偷能量挖...
原创文章，转载请注明出处：IE7-同级元素relative定位，子元素absolute定位z-index失效