在IE6或者IE7 中position:relative/absolute z-index失效问题的解决方法

当我们使用css做一个浮动层的时候通常会用到如下带：

.xxx

{

postion:absolute;

z-index:12px;

}

这样做class="xxx"的元素就会位于普通层的上方，这样在大多数浏览器中都是没有问题的，但是在IE6或者IE7这种怪咖中就有可能不起作用了，原因就在于需要将容器的父辈容器也设置z-index属性，在IE6/7中需要对比两个不同级别的元素的z-index要逐级的向父元素查找，如果父元素没有可比性，那么后面的元素会无视前面的元素的z-index强行覆盖。因此在IE6或者IE7中需要特别注意。

知道了原因，对症下药，方法就是给父元素也加上z-index，这样使他们都具有可比性。通过下面的例子可以说明问题：

 
第一块
 
第二块
 
第三块
 
第四块
 
第五块
 

现在我们设置下面的css

*{margin:0; padding:0; list-style:none;} 
li {width:100px; height:100px; margin:0 5px 0 0; background:#000; float:left; position:relative; z-index:1;} 
li span {width:200px; height:200px; background:#c00; position:absolute; top:0; left:100px; z-index:1000;}

通过上面的讲解，应该了解怎样在ie6/ie7下设置postion:absolute、z-index，赶快去解决问题吧。