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

1. 对于显式声明了position属性为非static的元素, 其z-index值越大, 越在上层.
2. 绝对定位的元素, 其定位的参考位置是向上层寻找到的第一个position属性非static的祖先节点. 最高为body

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.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实现起来要更简洁一些.
js的实现, 看这里(直接用的网上盛传的.. 纯粹为了图省事儿)

http://jsfiddle.net/cMonk/xGdf3/

参考

这个是昨天在StackOverflow上问的, 可以参考下Absolute overlay div element doesn’t cover relatively positioned elements
这一个是sofish他们的alice实现原理IE z-index bug感谢小鱼~

虽然IE6&7已经快要消失在地平线了.. 虽然就个人博客而言没什么必要去考虑IE6&7, 虽然我们发誓不能惯着那些抱着IE6&7大腿不放的人.. 但是就问题论问题. 于”虽然”无关
另外感慨, StackOverflow问题的恢复速度和质量确实很高. 国内知乎相对其他平台似乎也比较靠谱. 个人感觉, 速度会慢一些.

最后! 看脖子去了.. TMD颈椎 T.T