定位元素间的Z值比较及z-index在不同浏览器下默认值的影响
z-index在ie下缺省为:z-index:0; 而FF下则缺省为:z-index:auto;
(这个结论已然在蓝色的《补遗 》这个帖子中得出。而本文的讨论也是对《补遗》的总结及延伸。 )
你可以借助ie developer tool和firebug等工具进行测试查看z-index值。需要注意的是:z-index值须在设置position:relative/absolute/fixed之后方才生效。
正是IE/FF下这一点区别导致ie,ff下z值的不同表现。
注意:此处所说的z值区别于z-index,它指的是z轴层叠等级(stack level),表示垂直于显示屏方向上的各层的层叠顺序。不止z-index一个属性会影响到z轴层叠等级的大小(本文对其他属性的影响暂不做讨论,但本文的研究已排除其他属性的影响,其他属性不会影响本文的研究)。
正常情况下:兄弟(同级)元素后者居上,父子之间子高于父。
这一点必须明确,相信也没什么异见。
可以看下面这个demo:
提示:您可以先修改部分代码再运行
可以看出z的等级:子级2(“堂弟”)>父级2(“叔叔”)>子级1(“子”)>父级1(“父”)。
如果我们想要父盖过子,兄罩着弟只需设置其z-index便可。z-index值越大,给予的z值就越大。
那么这个设置能否改变叔侄之间,堂兄弟之间的Z呢?
先试试看:
提示:您可以先修改部分代码再运行
看上去一样有效,是吧?子级1盖过了父级2和子级2。
但是,再看看下面这个例子,假如各级元素都是定位元素(设置了position),情况就有些不同了(之后的讨论,都是基于这个条件之下的。我觉得position定位的应用非常广泛,基于此的研究也非常有必要)。
提示:您可以先修改部分代码再运行
son1设置z-index:1000后,在FF下的z值级别就高于其叔与其堂弟father2,son2。但是在ie下这个设置却还是不行。
这时候,我们回过头看最前面的结论:z-index在ie下缺省为:z-index:0; 而FF下则缺省为:z-index:auto;
那么再写一个Test,将父级的z-index固定为0:
提示:您可以先修改部分代码再运行
可以看出,一旦父级元素设置了相同的z-index,ff下“侄”元素一样无法超过“叔”元素和“堂弟”元素。
我们可以试着得出这么一个结论:
对于定位元素,(不论IE还是FF)非同级关系和非父子关系元素之间的Z值大小比较,须要回溯至其为兄弟关系的两个祖先元素上,先比较这两个元素的z-index值,只有当“兄”的z-index大于“弟”的z-index值,“兄”的各个后代元素,才能超过“弟元素”及其子孙元素。
我们用一个三级关系来验证一下。
提示:您可以先修改部分代码再运行
不论#first .father和#first .son如何设置,只有#first的z-index值大于0(second的z-index值为0)时,才能盖住#second。
对于IE,元素的z-index缺省值是0,如果不另外设置“兄”,“弟”元素的z-index值,那么”兄”的z-index就无法大于“弟”的z-index。那么”兄”元素及其子孙就无法盖过”弟”元素及其子孙。而一旦“兄”的z-index大过了”弟”元素的z-index,那么情况就翻转了,“弟”元素及其子孙将无法盖过“兄”元素及其子孙。
而对FF,元素的z-index缺省值是auto,auto的意思是什么,就是说“随便,不关我事”,那么子孙们的z值等级就只跟他们自己本身的z-index有关了。
那么,IE上能否设置z-index:auto;呢?
测试:
提示:您可以先修改部分代码再运行
可以看出,在IE下,去除#first{z-index:1}后,#first及其子孙无法盖住#second。
而FF下,#first .father,#first .son却盖住了整个#second。
推论:
z-index:auto在ie下无效。
那么在IE下,对于由定位元素构成的两个并列的嵌套结构块间的Z值大小,只存在两种情况:要么这个结构块里的所有层元素都在另一个结构块之上,要么就是那个结构块所有元素在其之上。没有可能一个元素能插在另一个结构块的父与子之间,这种情况在FF下是存在的(当然,还有其他浏览器),在FF下,父级是z-index:auto的元素,他们都是自由的,依据自己的z-index决定Z值。FF下甚至可以形成:
――――-
~~~~~~~~
――――-
~~~~~~~~
这么一个四层交错,但要超过四层,就无能为力了。
提示:您可以先修改部分代码再运行
最后,还是要提醒一下,这里的讨论限于定位元素间。
―――补充――――-
z-index:auto在ie中无效?
关于z-index:auto的解释,在W3C的CSS说明文档中的解释是:
The stack level of the generated box in the current stacking context is the same as its parent’s box. The box does not establish a new local stacking context.
即Z的层叠等级将继承父级,不创建新的层叠内容。
这段说明在CSS2和CSS2.1中是完全一致的,那为什么ie”不支持” z-index:auto呢?
在css2中有一段css2.1中所没有的解释:
An element that establishes a local stacking context generates a box that has two stack levels: one for the stacking context it creates (always ‘0′) and one for the stacking context to which it belongs (given by the ‘z-index’ property).
一个元素创建的层叠内容框包含两个层叠等级,一个是就是创建的层叠内容(总是“0”),另一个就是这个层叠内容包含的子层叠内容(由“z-index”属性决定)。
所以在ie当中,即便某元素设置z-index:auto,它所继承的z也是0。
这貌似同我们文章中第一段结论一致。也勉强解释了为什么z-index:auto在IE中无效。
建议继续学习:
- 12款很棒的浏览器兼容性测试工具推荐 (阅读:4927)
- Javascript和CSS浏览器兼容总结 (阅读:3924)
- 关于z-index的那些事儿 (阅读:3559)
- 如何更改字段至兼容的不同类型 (阅读:3134)
- 兼容所有浏览器的设为首页与显示小策略 (阅读:2968)
- 前端设计中的浏览器CSS Hack汇总 (阅读:2797)
- CSS中的z-index属性 (阅读:2403)
- 抛弃 CSS Hacks 后的浏览器兼容方案 (阅读:1980)
- 抛弃 CSS Hacks 后的浏览器兼容方案 (阅读:1697)
- 让数据解析能够做到向前向后完全兼容(最近做项目总结) (阅读:1603)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:oneboys 来源: Codyy技术团队
- 标签: z-index 兼容
- 发布时间:2009-10-14 13:36:27
- [69] Twitter/微博客的学习摘要
- [67] IOS安全–浅谈关于IOS加固的几种方法
- [66] 如何拿下简短的域名
- [65] android 开发入门
- [63] find命令的一点注意事项
- [62] Go Reflect 性能
- [61] 流程管理与用户研究
- [60] Oracle MTS模式下 进程地址与会话信
- [59] 图书馆的世界纪录
- [57] 读书笔记-壹百度:百度十年千倍的29条法则