建站学 - 轻松建站从此开始!

建站学-个人建站指南,网页制作,网站设计,网站制作教程

当前位置: 建站学 > 网页设计 > css教程 >

一起学习CSS元素的层叠与z-index设置(2)

时间:2011-03-31 08:46来源: 作者: 点击:
接下来我们来看一下一些问题的解释 在《 z-index在IE中的迷惑 》一文中我们最后提到的问题: 解惑:IE浏览器似乎给body元素默认了一个相对定位属性(position: relative)。 真是这样吗? 分析: box1显示在body的

  接下来我们来看一下一些问题的解释

  在《z-index在IE中的迷惑》一文中我们最后提到的问题:

 解惑:IE浏览器似乎给body元素默认了一个相对定位属性(position: relative)。

  真是这样吗?

    分析:

  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,定位。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片