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

知道91 | 站长推荐 | 2014-05-23 | 阅读:9160

当我们使用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,赶快去解决问题吧。