IE6下z-index犯癫不起作用bug的初步研究

by zhangxinxu from http://www.zhangxinxu.com
本文地址:http://www.zhangxinxu.com/wordpress/?p=471

一、匆匆带过的概念
关于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属性要 是relative,absolute或是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]
本文地址:http://www.zhangxinxu.com/wordpress/?p=471

(本篇完)

转载于:https://www.cnblogs.com/wqj0405/archive/2011/08/05/2128458.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/298163.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C#读取INI文件

虽然微软早已经建议在WINDOWS中用注册表代替INI文件&#xff0c;但是在实际应用中&#xff0c;INI文件仍然有用武之地&#xff0c;尤其现在绿色软件的流行&#xff0c;越来越多的程序将自己的一些配置信息保存到了INI文件中。 INI文件是文本文件,由若干节(section)组成,在每个带…

本地打开extjs api docs 的方法

将docs目录下 index.html 中的 <script type"text/javascript"src"../adapter/ext/ext-base.js">替换为 <script type"text/javascript"src"../adapter/jquery/jquery-1.4.2.min.js"></script><script type&quo…

独孤思维:穷b只对小概率惶恐不安,对100%确定却视而不见

穷b只对小概率事件惶恐不安&#xff0c;而对于100%确定的事情却视而不见。 穷逼有一个特点&#xff0c;喜欢把外界问题当作自己最大的挡箭牌&#xff1a; 对于小概率发生的事件&#xff0c;惶恐不安&#xff0c;避而远之&#xff0c;而对于100%确定的事情&#xff0c;却装作视…

电子报账系统源码_亲清直播间 | “互联网+财税”引领企业专票电子化变革

2019年11月27日&#xff0c;国务院常务会议要求“ 2020年年底前实现增值税专用发票电子化”&#xff0c;这标志着将增值税专用发票电子化工作正式提上日程。2020年8月3日&#xff0c;国家税务总局发布《关于进一步支持和服务长江三角洲区域一体化发展若干措施的通知》(税总函〔…

Dapr牵手.NET学习笔记:想入非非的服务调用

demo运行环境&#xff1a;Windows10&#xff0c;Docker(dapr_zipkin&#xff0c;dapr_redid&#xff0c;dapr_placement)安装&#xff1a;dapr init卸载&#xff1a;dapr uninstall&#xff0c;然后删除 C:\Users\当前用户\.daprdapr在部署时是通过给服务挂载一个sidecar&#…

老婆晚上不想睡?这个操作你要会!

1 会跪键盘吗&#xff1f;2 吃鸡时捡装备的你3 这是个失败之作4 是时候让你见识什么叫真正的技术了 5 别人的老师 6 陷入僵橘7 恐高者慎看你点的每个赞&#xff0c;我都认真当成了喜欢

java中JOptionPane类_java:JOptionPane类消息框总结

最近在写projet时经常用到JOptionPane的消息提示框&#xff0c;今天在这里做一个总结。主要用到四种消息提示框方法&#xff1a;showMessageDialog()&#xff1a;消息对话框showOptionDialog()&#xff1a;选择对话框showInputDialog()&#xff1a;输入对话框showConfirmDialog…

ACPI知识学习笔记

ACPI table之FACP(Fixed ACPI Description Table). 在代码里面&#xff1a;Resources\AcpiTables\Fadt\Fadt3.0.act 定义了EFI_ACPI_3_0_FIXED_ACPI_DESCRIPTION_TABLE Fadt. 列举出比较重要且常用的几项&#xff1a; INT_MODEL, //System Interrupt ModelSCI_INT_VEC…

Linux实战考试题:批量创建用户和密码-看看你会么?

批量创建10个用户stu01-stu10&#xff0c;并且设置随机8位密码&#xff0c;要求&#xff1a;不能用shell循环&#xff08;例如&#xff1a;for,while等&#xff09;&#xff0c;只能用linux命令及管道实现。此题考察的是基础命令的熟练运用&#xff0c;因此&#xff0c;限制了使…

python继承方式是基于原型吗_基于原型与基于类的继承

小编典典这里大约有一百个术语问题&#xff0c;大多数是围绕某人(不是您)试图使他们的想法听起来像是“最好的”。所有面向对象的语言都必​​须能够处理以下几个概念&#xff1a;数据封装以及对数据的关联操作&#xff0c;除其他外&#xff0c;各种操作被称为数据成员和成员函…

【视频】CCNA——telnet和SSH的配置

链接失效请E-MAIL&#xff1a;loguis-iehotmail.com地址&#xff1a;http://u.115.com/file/f4e6e095f3转载于:https://blog.51cto.com/loguis/332652

每天扫扫扫,二维码会被我们扫完吗?

全世界只有3.14 % 的人关注了爆炸吧知识支付码、名片码、健康码、校园码、复学码、乘车码、挪车码码码码码码码码码码码码码码码码码码码码码码码码码码&#xff0c;这么多码&#xff1f;光疫情期间&#xff0c;就用掉了 1400亿个二维码&#xff0c;那么就有同学来问了&#xf…

高级SQL注入拿shell,一般黑客不知道。哈客

服务器只有一个站,又找不到注入点怎么办? 你可以试试在搜索框,登陆,任何框框里放个单引号,看看是否报错 初级部分 加个单引号,后面随便,随便填个密码,点击登陆 典型的SQL注入判断权限: and user>0-- 明显的sa权限获取数据库名字: and db_name()>0-- 很…

使用 SVG 动画实现弹性的页面元素效果

Codrops 分享了一些给SVG元素加上弹性动画的灵感。实现的思路是把一个SVG元素整合成一个组件&#xff0c;然后从一个路径弹性动画到另一个。这种效果可以应用到像菜单&#xff0c;按钮或其它元素&#xff0c;使得交互更有趣&#xff0c;看起更原生与自然的感觉。 在线演示 …

CCNA,CCNP资料

CCNA资料、、、、、、、、、、、、、、、、、、、、转载于:https://blog.51cto.com/youye/334779

虚拟ip工具_针对游戏防封换IP有用吗?

如今的网游有的有局限ip地址登录&#xff0c;就是说1个ip地址只可以登录1个或是两个客户端&#xff0c;可是也不是全部的游戏都局限&#xff0c;那麼针对ip限制怎样游戏多开呢&#xff1f;游戏局限针对许多用户而言是很不太好的&#xff0c;由于它们需用非常好号来挂&#xff0…

万万没想到,刷1000道题目,还不如搞懂这几个机械动图!

▲ 点击查看 著名教育家蒙台梭利曾说&#xff1a;“孩子成长中最重要、最基本的就是注意力集中”。而乔布斯也曾说&#xff1a;“专注和简单一直是我的秘诀之一。观察一下你家的孩子&#xff0c;会不会经常出现这种情况:孩子上课坐不住、总跑神&#xff0c;小动作不断&#xf…

Mysql日期

2019独角兽企业重金招聘Python工程师标准>>> create view fin1 as select o.code, s.organization_name,s.name,s.sex,s.identity_card_number,date_format(s.final_into_association_time,%Y-%m-%d),s.number_of_worked_in_association,(year(now())-year(s.begin_…

复制一个文件夹中的所有文件和文件夹的java程序实现

使用java程序实现了对文件夹的复制功能&#xff1a; package demo.io; import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.BufferedReader;import java.io.BufferedWriter;import java.io.File;import java.io.FileInputStream;import j…

Silverlight 2.5D RPG游戏技巧与特效处理:(十六)动态资源

即开即玩是网页游戏相比传统客户端游戏的最大优势。如果说在每台电脑安装上G的客户端是一种资源浪费及时间污染&#xff1b;那么Silverlight作为RIA界的新宠儿&#xff0c;在继承祖辈优秀血统的前提下拥有更加卓越的性能及更为曼妙的动态表现&#xff0c;势将引领网络未来世界进…