当前位置:首页 > 站长推荐 > 在IE6或者IE7 中position:relative/absolute z-index失效问题的解决方法

在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,这样使他们都具有可比性。通过下面的例子可以说明问题:

1
2
3
4
5
6
7
<ul> 
<li>第一块</li> 
<li><span>第二块</span></li> 
<li>第三块</li> 
<li>第四块</li> 
<li>第五块</li> 
</ul>

现在我们设置下面的css

1
2
3
*{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,赶快去解决问题吧。

  • << Linux 环境下 & PHP+IIS环境下 Discuz无...
  • WordPress怎样给文章添加固定字段 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/ie6-ie7-p-z-sxwtdjjff/

    相关文章 近期热评 最新文章

    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • 怎样在WordPress中安装Google Analytics
      就算你积累了多年网站建设的经验,你都不可能一开始就建一个外观,速度,功能以及转化都很完美的网站。你能做的并且也是各个站长正在做的,无非是通过不断的监测来改进...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程