IE7 绝对定位z-index 层级问题

先看两个对z-index以及position的常有认识

1. 对于显式声明了position属性为非static的元素, 其z-index值越大, 越在上层.

2. 绝对定位的元素, 其定位的参考位置是向上层寻找到的第一个position属性非static的祖先节点. 最高为body

按照这种认识去考虑问题, 下边的代码, 他的表现应该如何?

.rela{
	position:relative;
	/*修饰*/
	width:200px;
	height:100px;
	background:#EEE;
	border:solid 1px #CCC;
	margin-bottom:10px;
}
.abs{
	z-index:10;
	position:absolute;
	/*修饰*/
	width:50px;
	height:50px;
	top:80px;
	left:20px;
	background:#333;
	border:solid 1px #000;
}

1 2 3 4

<div class="rela"><div class="abs"></div></div> <div class="rela"><div class="abs"></div></div> <div class="rela"><div class="abs"></div></div> <div class="rela"><div class="abs"></div></div>

我觉得, 忽略其他任何可能的bug问题, 我们期待的样子是下边两幅图中, 左边那种.
不幸的是, 在IE7, 他成了右边的那个熊样..(看不出跟上边区别的, 洗洗睡吧)
 

即便是将.abs的z-index调成1000000000000000000000, 也么有一点用(z-index有最大值不?)..

补充一点z-index知识

之前看过一篇介绍z-index属性的帖子, 地址记不住了… 讲到, 如果父级的z-index值非auto, 则不管子集的z-index值多大, 都无法正常覆盖父级的同辈元素.

1 2 3 4 5 6 7 8

<!-- 若li的z-index不为auto 无论p的z-index值多大, 都无法覆盖siblings_parent --> <li class="parent"> <p>我是子集</p> </li> <li class="siblings_parent">我是父级的同辈元素</li>

问题的原因

但是现在的问题并非这点导致. 他源于IE7的一个”bug”. 没有找到官方文献. 从网上获取+自己的理解, 总结如下

父元素相对定位, 其子元素设置绝对定位并设置较大的z-index值, 以期让其浮在最上层. 该元素的定位会向上找到第一个position属性非static的祖先元素, 但是, 其祖先元素后面的同辈元素若设置position非static, 且z-index为auto, 则其z轴高度会始终大于之前绝对定位的元素, 且无法被冲破. 

(有点绕口, 照着最上边例子,理解起来会容易些)

解决办法

解决起来, 能想到的+网上搜到的(到目前为止), 无论是纯css方式还是借助js, 都是通过为position非static的祖先元素及其同辈元素设置递减的z-index值. 如此说来, js实现起来要更简洁一些.

$(function() {    

   var zIndexNumber = 1000;   

   $('div').each(function() 

       $(this).css('zIndex', zIndexNumber);       

        zIndexNumber -= 10;    

   });});