ie6和ie7中z-index的解决方法

一,定义与说明

z-index是针对网页显示中的一个特殊属性.因为显示器是显示的图案是一个二维平面,拥有x轴和y轴来表示位置属性.为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别.表示一个元素在叠加顺序上的上下立体关系。

z-index伴随着层的概念产生的。网页 中,层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上 面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡。

在photoshop中,层的高低就是靠手动调的,鼠标拖拽,或是ctrl+]或是ctrl+shift+[快捷键改变层的次序。如下图,鼠标拖移 改变层次序的过程中:

photoshop改变层顺序

在flash中,类似,可以手动改变图层次序,或是使用as脚本,例如:容器对象.setChildIndex(显示对象,0)就是让对象底层显 示,而容器对象.setChildIndex(显示对象,容器对象.numChildren-1)就是最上面显示。

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

z-index示意图

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

二、关于效果截图的些必要说明

以下所有结果截图的大背景如下:

1、页面上固定不动的,一成不变的,送豪宅也不会从良的是一个黑色背景,透明度40%,几乎满屏显示的层级为1的绝对定位层。HTML为:

<p id="blank"></p>

对应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)属性。

下面有几个情况会出现:

情况1:子元素的z-index无论多大,父元素大者居上。

情况2:父元素居下,子元素也可以居上。

情况3:情况1、情况2结合

您可以拿下面的代码自己做个简单测试:

<p id="blank"></p>

<p style="position:relative; z-index:9999;">

<img style="float:left;" src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />

</p>

丫的,这z-index都9999了,层级够高吧,但是,看下面的图:

IE6下的9999不管用

Firefox下图片层级正常

这一对比就知道问题了,可能有人会疑问,这会不会是IE6的relative自己感冒了,而不是浮动(float)携带了“甲流病毒”。好,我现在 去掉浮动,HTML代码如下:

<p id="blank"></p>

<p style="position:relative; z-index:9999;">

<img src="http://image.zhangxinxu.com/image/study/s/s256/mm2.jpg" />

</p>

结果IE6下:

IE6下的层级正常

我想,问题应该都清楚了,至于原因,我起初以为是haslayout搞的鬼,后来,用zoom一测试,发现不是(IE7下无此bug也证明不是 haslayout的原因),似乎就是这个float会让z-index失效。由于将外部p的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代码:

<p id="blank"></p>

<p style="position:relative;">

<p style="position:relative; z-index:1000;">

        <p style="position:absolute; z-index:9999;">

        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />

        </p>

    </p>

</p>

可以看到,mm3图片的父标签p 是绝对定位,层级9999,比1大多了,绝对定位的父标签层级1000(10000也一样),也比黑色半透明层的z-index:1大多了,但是,我们可 怜的IE6童鞋——

IE6童鞋的层级表现

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

Firefox童鞋的层级表现

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

第一个老爸不行

知道原因解决就很轻松了,给第一任老爸添加z-index后的HTML代码如下:

<p id="blank"></p>

<p style="position:relative; z-index:1;">

<p style="position:relative; z-index:1000;">

        <p style="position:absolute; z-index:9999;">

        <img src="http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg" />

        </p>

    </p>

</p>

结果IE6童鞋喜笑颜开,春光灿烂:

IE6的第一任老爸强势后

zhaoan

一个不起眼的IT工作者,从事过的行业较多,医疗保健、医院、月子会所、机电、重卡、软件,涉及的岗位也较多,零售、市场、平面设计、网站设计、UI设计、前端开发、后端开发、网络布线、设备维护、服务器维护、网络推广、网站运营、新媒体运营、部门管理等等,每个岗位工作基本都能独立完成,但是涉及面广导致都不精通,学习还在继续中。。。

You may also like...