元素层叠级别及z-index剖析（3）
作者：rong179 来源：蓝色理想 发布时间：2008-07-22 12:03:00
一些问题的解释：
怿飞版主在《z-index在IE中的迷惑》一文中最后提到的问题：
运行代码框
演示地址：
http://rong179.blogbus.com/files/12163573190.html
认为：
解惑：IE浏览器似乎给body元素默认了一个相对定位属性（position: relative）。
真是这样吗？
运行代码框
演示地址：
http://rong179.blogbus.com/files/12163572440.html
分析
box1显示在body的下方，根据上面的stack level规则，IE中，如果body默认了一个位置属性，即body是其父级stacking context，box1应显示在其上方，事实却不是这样。而且当我们给body加上position：relative以后，显示效果和stack level规则一致。所以body并没有默认位置属性。
那为什么负值的定位元素在IE和FF下显示不一致呢？
ie 中根据stack level规则： z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）高，显示在其上方。故box1在ie中能显示。ff3.0和标准一致，也能显示。大家可以试一下。
ff2.0 中由于那条特殊的stack level，即 z-index为负的定位元素的stack level比父级stacking context（此处是root stacking context）低，所以显示在root stacking context下方。故不能看见。
另外，上面的代码中加上opacity那条后，在ff2.0中即可显示了。这又是什么原因呢？
推测：在火狐中如果给元素设置opacity属性（1除外），即会产生新的stacking context。
上面加上opacity属性后在ff2.0中可显示box1在body下，ff3.0box1在body上，（可以根据上面的stack level规则自己分析）符合推测。
在w3c的说明中也证明这点
In future levels of CSS, other properties may
introduce stacking contexts, for example 'opacity'
[CSS3COLOR].
总结：
在一个stacking context中元素的z-轴显示顺序，由元素所处的 stack level 决定。对于同一stack level的定位元素由z-index的大小进一步决定显示次序。
ie中给元素设置position属性（static除外）可产生新的stacking context
ff中给元素设置opacity属性（1除外）可产生新的stacking context
除此之外（也许设置其他属性也会产生新的stacking context，但还不知道）只有定位元素设置了z-index(auto除外)才会产生新的stacking context，子元素将按照新的stacking context，定位。
0
投稿猜你喜欢
- 这几天刚刚做了这个东西，有网友问到，所以分享一下。ie6、firefox2 通过，麻烦有ie7的网友测试一下，由于有其他代码，剖析出来麻烦，
- 元素是文档结构的基础，在CSS中，每个元素生成了一个包含了元素内容的框（box，也译为“盒子”）。但是不同的元素显示的方式会有所不同，例如&
在蓝色看到的几个js日历代码，整理了一下。大家可以用在blog上，或者可以用在表单的日期类型的数据选择中，方便大家填写日期。1.动感的日历，- SQL Server服务器的配置选项属于那种人们了解较少且经常误用的选项。当一个技术支持人员要求你按照某种方式调整一个选项、而另一个技术支持
- 阅读：Chapter 3 * 的表格“Misquotations are the only quotations tha are never
- 这些CSS Selector在平时写页面的时候用地不多，只在JavaScript库、Firefox插件、iPhone页面里有过接触。推荐大家
- 1、选取最适用的字段属性MySQL 可以很好的支持大数据量的存取，但是一般说来，数据库中的表越小，在它上面执行的查询也就会越快。因此，在创建
- SQL(结构化查询语言)就是负责与ANSI维护的数据库交互的标准。最新的版本是SQL-99，还有一个新标准SQL-200n尚处于制定过程中。
- （5）SELECT （5-2） DISTINCT（5-3）TOP（<top_specification>）（5-1） <s
- 以下函数采用FSO对象，文件位置在FSO.ASP。FSO对象的文件编码属性只有三种，系统默认，Unicode，ASCII，并没有我们要的ut
- 摘要：本文介绍了有关数据表的优化技巧，主要内容有，选择表的类型，打开尽量少的表，锁定表与查询速度的关系以及如何优化表以达到提高查询速度的目的
- 阅读上一篇：FrontPage2002简明教程七：HTML在FrontPage中的应用 FrontPage 2002比起以前版本的FronP
- 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什么意思，但是这两篇重
- 表单递交合法性检测-只接受数字。如下代码加入HTML的<head>区：<SCRIPT LANGUAGE=&quo
- 一、 网页设计中的对比原则一件网页设计作品由许多元素构成，它们的重要性各不相同，其中一些元素的重要性要高于其它元素。一些相互关联，而另一些则
- 同事在准备新老系统的切换，清空一个表的时候往往发现这个表的主键被另一个表用做外键，而系统里有太多层次的引用.所以清起来相当麻烦用下面这个脚本
- 经常开发asp但对于细致的说法，真实不太清楚，这里简单的介绍下。一般情况下读取数据都是用rs.open sql,conn,1,1修改数据:r
- AXObject可用来解决IE需要激活 ActiveX 控件和生成控件调用代码 AXObjec
- 我使用“ Web 2.0设计”来形容目前占主导优势的网页设计风格， 很多人用这个词来形容：网络经济的复苏网站和用户之间更高水平的交互或一种社
- 百度有啊2009年情人节logo——大纸袋GG给大纸袋MM送了枝玫瑰花，大纸袋MM奖励了大纸袋GG一个吻，好可爱！淘宝网2009年情人节lo
