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;    
   });});
展开阅读全文

没有更多推荐了,返回首页