先看两个对z-index以及position的常有认识
对于显式声明了position属性为非static的元素, 其z-index值越大, 越在上层.
绝对定位的元素, 其定位的参考位置是向上层寻找到的第一个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;}
1234
<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值多大, 都无法正常覆盖父级的同辈元素.
12345678
<!--若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;
});});
