`
xiaoqiang6775
  • 浏览: 32756 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

IE6下z-index经常不起作用bug的细分析

阅读更多

这是一个在鑫空间里转过来一篇文章,作者写的很详细,很给力,不感独享。

一、匆匆带过的概念
关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述。这里就简单带过,z-index伴随着层的概念产生的。网页中,层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡。

在photoshop中,层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图,鼠标拖移改变层次序的过程中:
photoshop改变层顺序
在flash中,类似,可以手动改变图层次序,或是使用as脚本,例如:容器对象.setChildIndex(显示对象,0)就是让对象底层显示,而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。

在CSS中,显然,只能通过代码改变层级,这个属性就是z-index,要让z-index起作用有个小小前提,就是元素的position属性要是relativeabsolute或是fixed。就像生孩子一样,一个人不顶用,需要配合。下为z-index的业余示意图:
z-index示意图

按照正常的思维,z-index层级越高,内容越应该在上面显示。在大部分的浏览器在大部分的情况下,确实如此,但是不绝对。尤其遇到IE6,这家伙,估计是后妈带大的,从小营养不良,结果后来健康问题一堆又一堆。z-index的问题就是其中之一,而本文就是要讲讲这个IE6下z-index不起作用的问题。

二、关于效果截图的些必要说明
下面的不是废话,是为了更容易的理解我下面唾沫横飞的内容。

以下所有结果截图的大背景如下:
1、页面上固定不动的,一成不变的,送豪宅也不会从良的是一个黑色背景,透明度40%,几乎满屏显示的层级为1的绝对定位层。HTML为:<div id="blank"></div>,对应CSS为:#blank{width:100%; height:600px; background:black; opacity:0.4; filter:alpha(opacity=40); position:absolute; left:0; top:0; z-index:1;}

作用是为了让层级关系一目了然。看:
内容位于半透明层之下
这说明内容在z-index为1的绝对定位层之下。

内容位于层之上
这说明内容在z-index为1的绝对定位层之上。

2、页面上做对比的是美女图片,图片在半透明黑色绝对定位层的上面还是下面很容易辨别,这样,您就能够对我所说的z-index不起作用有很直观的认识了。

三、IE6的抱怨:浮动让我沉沦
现在开始真正的讲述问题的产生,原因以及解决了。首先讲讲第一种z-index无论设置多高都不起作用情况。这种情况发生的条件有三个:1、父标签position属性为relative;2、问题标签无position属性(不包括static);3、问题标签含有浮动(float)属性。
您可以拿下面的代码自己做个简单测试:

<div id=”blank”></div>
< div style=”position:relative; z-index:9999;”>
<img style=”float:left;” src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
< /div>
丫的,这z-index都9999了,层级够高吧,但是,看下面的图:
IE6下的9999不管用
Firefox下图片层级正常

这一对比就知道问题了,可能有人会疑问,这会不会是IE6的relative自己感冒了,而不是浮动(float)携带了“甲流病毒”。好,我现在去掉浮动,HTML代码如下:
<div id=”blank”></div>
< div style=”position:relative; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg” />
< /div>
结果IE6下:
IE6下的层级正常

您可以狠狠地点击这里:在线demo测试

我想,问题应该都清楚了,至于原因,我起初以为是haslayout搞的鬼,后来,用zoom一测试,发现不是(IE7下无此bug也证明不是haslayout的原因),似乎就是这个float会让z-index失效。由于将外部div的position:relative属性改为absolute可以解决这一问题,我就怀疑是不是浮动让relative发生了些变化,float与relative在水平定位上可以说是近亲,会不会是因为这两者搅和在一起所以什么“畸形”“体弱多病”就出现了。这仅是我的猜测而已,真正的原因还是去问IE6的后妈吧。

解决方法,解决方法有三,1、position:relative改为position:absolute;2、去除浮动;3、浮动元素添加position属性(如relative,absolute等)。

四、固执的IE6:它只认第一个爸爸
可能不少人知道,这IE6下,层级的高低不仅要看自己,还要看自己的老爸这个后台是否够硬。用术语具体描述为:
父标签position属性为relative或absolute时,子标签的absolute属性是相对于父标签而言的。而在IE6下,层级的表现有时候不是看子标签的z-index多高,而要看它们的父标签的z-index谁高谁低。

有一定经验的人可能都知道上面的事实。但是,相信这里面很多人不知道IE6下,决定层级高低的不是当前的父标签,而是整个DOM tree(节点树)的第一个relative属性的父标签。有时平时我们多处理一个父标签,z-index层级多而复杂的情况不多见,所以难免会有认识上的小小偏差。

好,下面展示这个bug

条件很简单,只要绝对定位的第一个元素的第一个爸爸,或者说是最老的那个爸爸级别的人的relative属性小于黑色半透明层的z-index层级。例如下面的HTML代码:
<div id=”blank”></div>
< div style=”position:relative;”>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
< /div>
< /div>
< /div>
可以看到,mm3图片的父标签div 是绝对定位,层级9999,比1大多了,绝对定位的父标签层级1000(10000也一样),也比黑色半透明层的z-index:1大多了,但是,我们可怜的IE6童鞋——
IE6童鞋的层级表现

再看看以Firefox为代表的其他童鞋:
Firefox童鞋的层级表现

IE7与IE6有着同样的bug,原因很简单,虽然图片所在div当前的老爸层级很高(1000),但是由于老爸的老爸不顶用,可怜了9999如此强势的孩子没有出头之日啊!

第一个老爸不行

知道原因解决就很轻松了,给第一任老爸添加z-index后的HTML代码如下:
<div id=”blank”></div>
< div style=”position:relative; z-index:1;“>
<div style=”position:relative; z-index:1000;”>
<div style=”position:absolute; z-index:9999;”>
<img src=”http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg” />
< /div>
< /div>
< /div>
结果IE6童鞋喜笑颜开,春光灿烂:
IE6的第一任老爸强势后

您可以狠狠地点击这里:改变父标签层级在线demo测试

五、必要的结语
老实讲,我对z-index研究的精力其实比较有限,本文的两个bug研究都属于停留在表层的。z-index这玩意深不可测,里面所蕴含的知识不是CSS手册上的那点东西,那只是冰山一角。这涉及到border及background的堆叠模型,涉及到同层级的显示问题,以及浏览器显示的些机制等,这是很深的一潭水。

总之,慢慢来,慢慢积累,慢慢研究,一定会一步一步揭开z-index的本质面纱的。

原创地址:http://www.zhangxinxu.com/wordpress/?p=471

分享到:
评论

相关推荐

    IE6之Select的Z-Index設定【解决IE6的z-indexBUG】

    在IE6的環境下,如果網頁上有div區塊和下拉選單重疊在一起的時候,即使再怎麼調整下拉選單的z-index,下拉選單還是會把div區塊蓋住(在Firefox是正常的),google了一下網路上的資料,大多是用iframe來解這個問題,但...

    IE6 select z-index无效,遮挡div bug的解决方法

    今天我说说iframe解决的一般方法,已经使用jQuery插件bgiframe解决IE6 select z-index无效,遮挡div的bug。 解决方法之一:Iframe包裹select元素 使用iframe包住select,这样iframe有z-index,只要在div上设置的z-...

    IE7 设置z-index的覆盖问题的解决方法

    在非IE7浏览器中,z-index的使用是相对直观和可靠的,但在IE7及更早版本中,由于引擎的限制或bug,出现了上述提到的覆盖问题。 在传统的CSS中,position:relative 与 position:absolute 是常用的定位方式。position...

    CSS 定位之 z-index 问题分析

    position值为非static时,如果不设置z-index属性,IE6/7下z-index默认为0,而IE8及以上浏览器z-index为auto,且zindex:auto的元素不参与堆叠优先级比较。 ff/chrome z-index IE6/7 IE8/9 不设置 0 auto au

    Jquery 解决IE6 Select 框总是在图层(div)的上面显示的BUG

    本文将深入探讨如何利用jQuery解决一个特定的问题:在IE6下,Select元素总是显示在具有较高z-index的图层(如div)之上。 首先,我们要理解z-index的概念。在CSS中,z-index是一个用于控制元素在垂直方向(即Z轴)...

    DIV在IE6中被下拉菜单占据的问题

    2. **设置更高的z-index**:尽管在IE6中可能不起作用,但还是值得尝试为受影响的`&lt;div&gt;`元素设置一个高于下拉菜单的`z-index`值。 3. **使用hasLayout属性**:IE6中有一些元素拥有一个称为“hasLayout”的内部属性...

    解决IE6下三级下拉菜单被select遮挡的问题.docx

    总结来说,解决IE6下三级下拉菜单被`&lt;select&gt;`遮挡的问题主要通过以下两步: 1. 在下拉菜单元素之前插入一个透明的`&lt;iframe&gt;`,提高菜单的z-index层次。 2. 使用CSS控制菜单的布局和交互效果,包括定位、浮动、显示...

    网页排版IE6兼容性问题修改方法

    `position:absolute`在IE6下可能无法正常工作,需要使用`position:relative`和`left/top`配合,或者使用`position:static`和`margin`调整。 8. **层叠上下文** IE6对层叠上下文的理解不同于其他浏览器,可能导致z...

    js鼠标滑过弹出层的定位IE6bug解决办法

    但是,IE6并不完全支持`z-index`,导致在某些情况下,即使设置了较高的`z-index`,弹出层仍然会被其他元素遮挡。这在使用多个重叠的弹出层时尤为明显。 为了解决这个问题,我们可以利用jQuery动态调整元素的`z-...

    最全前端面试题-2.2(浏览器兼容问题篇-上百篇题集整理1个月).doc

    - **IE6的`z-index`无效**:在某些情况下,IE6的`z-index`不起作用,可以通过设置父元素的`hasLayout`或使用`position:relative`解决。 - **3像素问题**:在IE6中,水平边距计算错误,可通过负边距修正。 - **...

    ie6 select无法被div遮盖的bug解决方法

    在早期的Internet Explorer 6(简称IE6)浏览器中,存在一个著名的布局bug,这个问题主要涉及到`&lt;select&gt;`元素与`&lt;div&gt;`元素的层叠上下文(Z-index)处理。当一个`&lt;div&gt;`元素试图遮盖页面中的下拉列表框`&lt;select&gt;`时...

    css浏览器兼容整理

    6. **IE6下绝对定位的容器内文本无法正常选择** - 这是一个已知的IE6问题。可以通过设置`position: relative;`和`z-index`来解决。 7. **CSS双线凹凸边框** - 可以使用多重`border`或`box-shadow`来创建双线...

    css规范_IE bug,IE与Firefox的CSS兼容问题.....整理

    3. 浮动问题:IE6下浮动元素可能导致高度塌陷,需使用clearfix方法解决。 4. 层叠上下文:IE浏览器对于层叠上下文的处理与Firefox有所不同,可能需要调整`z-index`。 十三、微软IE6浏览器的应用分析 IE6的兼容性...

    前端项目-jquery-bgiframe.zip

    然而,在旧版IE浏览器中,特别是IE6,存在一个著名的bug,使得某些元素的z-index无法正确生效,特别是在浮动元素和绝对定位元素之间。这个问题通常会导致重叠元素的显示异常,遮挡了预期应该在上层显示的内容。 ...

    IE6下div层被select控件遮住的问题解决方法

    在互联网的早期,尤其是IE6浏览器占据主导地位的时代,开发者们常常会遇到一个棘手的问题:在页面上,当一个`div`层位于`select`下拉框之上时,`select`控件会穿透`div`层显示出来,导致设计效果无法正常展现。...

    IE8、IE7、IE6、FF简单的CSS HACK测试

    2. **z-index BUG依然存在**:IE8并没有完全修复z-index的处理方式,可能导致层叠顺序的混乱。开发者可能需要使用负值z-index或其他Hack来解决。 3. **行高(line-height)BUG**:IE8可能存在新的行高渲染问题,这...

    IE6下Select元素被div等元素覆盖的解决办法

    但是IE6有一个神奇的逻辑,div 无法覆盖select,但是iframe 可以覆盖select,而div可以覆盖iframe,所以解决办法就是用Z轴高度更高的Iframe元素,包裹或覆盖住下拉列表框控件,使其回到正常的Z轴高度上来!...

    IE中伪类hover的使用及BUG

    除了讨论属性的改变之外,文章还提醒开发者不应通过改变display属性值来解决这个BUG,因为这种方法在某些情况下可能无效。同时,建议在尝试消除BUG时,可以灵活运用CSS中的简写和全写属性,来确保兼容性的实现。 在...

Global site tag (gtag.js) - Google Analytics