IE6中多个绝对定位和相对定位重叠时z-index失效的问题

来源:互联网 发布:物理名师课堂软件 编辑:程序博客网 时间:2024/06/08 04:05

这是一个很奇怪的问题,但也能够理解,只有IE6才会出现,今天做一个东西,在IE8 FF GOOGLE 360都测试OK,唯独IE6的下拉菜单总被下面正文中滚动的banner遮挡,明明 下拉菜单的z-index已经很大了。

<div class="a"> //position:relative 主要是下拉菜单的位置要相对于这个父元素

    <div class="b"> //position:absolute  z-index:100 下菜菜单的容器

    </div>

</div>

<div class="c">

      <div class="d">//position:absolute   z-index:20

     </div>

</div>

如果像这个代码,ie6下 那么下拉菜单b伸出来的内容会被d遮挡住,即使z-index设置的层级是对的,其它浏览器没问题。

原因很简单,因为 a 没有设置层级, b是a的儿子,在ie6排列叠加时,已经把a排到d下面了,与b无关,只要设置了a的z-

index小于d 就行了,这个问题只有ie6有, ie8 e60 googe ff等都测试是没问题的。

一般情况下很少用到position:relative 也要设置z的情况,因为布局从不曾那么巧合,这个问题在逻辑上是能够理解的,

不要一直以为position:absolute 的层叠是全文档一致的, 如果有父无并设置了相对定位,那么ie6就只拿父元素和其它的元素来比较了。

 

 

原创粉丝点击