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

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

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

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

您可以狠狠地点击这里:在 线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童鞋——

再看看以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童鞋喜笑颜开,春光灿烂:

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

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

ie6和ie7下z-index bug的解决办法的更多相关文章

  1. IE6 IE7下文字显示竖排的解决办法

    IE下文字显示竖排的解决办法: white-space:nowrap;

  2. 【css】a:hover 设置上下边框在 ie6 和 ie7 下失效

    前段时间在写样式的时候发现了这个问题,虽然当时就解决了这个 bug 不过还是记录下,以免再次出现这样的问题. demo 代码: <!doctype html> <html lang= ...

  3. 【css】ie6 和 ie7 下 position 与 overflow 的问题

    前几天做的项目中碰到这样一个问题,在 ie6 和 ie7 下,给父元素设置 overflow:hidden 不起作用无法隐藏,后来发现是子元素中有设置 position:relative,如果子元素删 ...

  4. li中包含span,在IE6、IE7下会有3pxbug

    如果给每个li里面加个span标签的话,在IE6,IE7下看,li与li之间的距离就会多了3px. 解决方法:在li中加vertical-align:middle; <div class=&qu ...

  5. ie6、ie7下overflow失效

    如果父对象有overflow:hidden属性,子对象中的position属性是relative或者absolute, 那么在ie6和ie7下父对象的overflow会失效,解决办法是给父对象加rel ...

  6. 【转载】IE浏览器常见的9个css Bug以及解决办法

    IE浏览器常见的9个css Bug以及解决办法 我们在浏览网页的时候经常看见这样的现象:某个网页在IE6浏览器中打开很正常,但是在IE8里面打开可能完全变形了.或者也有可能出现完全相反的现象.这让We ...

  7. 记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法

    原文:记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法 转载请注明出处:http://www.cnblogs.com/Ray1024 一.问题描述 在MFC中使用Dir ...

  8. linux下编译出现空间不足解决办法

    linux下编译出现空间不足解决办法 编译内核出现问题: AS      .tmp_kallsyms1.o .tmp_kallsyms1.S:2: fatal error: when writing ...

  9. Error 56: The Cisco Systems, Inc. VPN Service has not been started(Cisco VPN在Vista下出现Error 56的解决办法)

    Error 56: The Cisco Systems, Inc. VPN Service has not been started(Cisco VPN在Vista下出现Error 56的解决办法) ...

随机推荐

  1. maven项目如何跳过某些junit test,或者指定执行部分junit test

    maven-surefire-plugin的插件提供了对测试目录的配置,想要细看的或者学习更多东西的可以去http://maven.apache.org/surefire/maven-surefire ...

  2. 关于js的一些基本知识(类,闭包,变量)

    这里写的都是些杂知识,包括私有,类,闭包这些js不可避免的东西,感觉自己有可能会误人子弟.所以有觉得写错了的读者,希望可以及时评论告诉我.我可以及时更正.多谢大家了 1.关于类的创建 类的创建大致可以 ...

  3. Fragment和Activity(转)

    Android Fragment和Activity Fragment和Activity Fragment和Activity的交互 一个Fragment的实例总是和包含它的Activity直接相关. f ...

  4. ZUFE OJ 2301 GW I (3)

    Description GW 是ZUFE的神犇,有一天他想到一种神奇的变换,并且将它命名为GW变换 对于一个数字n,该变换后的值GW(n)为,先令X=n 第一步,如果X为个位数,GW(n)=X,否则执 ...

  5. HTML之禁止输入文本

    一个文本框,禁止输入文本有2个方式,一个是利用readonly ,一个是利用 disabled. 那么两者虽然目的都可以达到,但是从表现上来看disabled会显得更加的直观,为什么这么说. 请看截图 ...

  6. ACM录 之 常识和错误。

    接下来说说一些ACM里面的常识和错误...(可能会比较乱) —— 首先ACM里面的代码都是要提交上去,然后让计算机自动判题的,所以...千万不要把 system("pause"); ...

  7. CodeForces 620C Pearls in a Row

    水题,每当出现重复就分割开来,最后留下的尾巴给最后一段 #include<cstdio> #include<cstring> #include<cmath> #in ...

  8. clip实现圆环进度条

    效果主要通过clip和transform:rotate实现 把圆环分为左右两个部分,通过角度旋转对图片剪切旋转角度<=180度的时候之旋转右边,当大于180度时右边固定旋转180度的同时旋转左边 ...

  9. C语言实现求字符串子集问题

    这个问题在于实现Apriori算法的时候需要求各个频繁集的关联规则,而这时需要在求得最大的频繁集中求各个频繁集的真子集.然后在实现这一步的时候被卡主了,第一反应是用递归完成,但是面对数据挖掘中庞大的项 ...

  10. 如何在微软Hyper-V下发挥SQL Server最大功效

    要建设稳定运行的虚拟化SQL Server系统,关键是确保虚拟化管理软件配置能提供数据库所需的资源.SQL Server是CPU密集型技术,因此支撑它的虚拟机需要能获得充足的处理器资源,同时不能引起与 ...