代码改变世界

用例子验证w3c的stack-level在不同浏览器中的显示

2012-07-17 15:29  @影子@  阅读(992)  评论(2)  编辑  收藏  举报

      z-index是我们非常熟悉的属性，用来确定定位元素在垂直于显示屏方向的层叠顺序
      需要明确的是仅仅作用于定位元素，relative和absulute有效。没有继承性。

      stack-level不同于z-index，在每一个stacking context中的每个box都有一个stack level，
      值大的显示在上，值小的显示在下，同一stack-level的遵循后来居上的原则.
     

w3c规定的stack-level规则
      1、定位元素：父级的背景、边界
      2、定位元素：z-index为负值的定位元素
      3、非定位元素（文本流中）：block块级元素
      4、非定位元素（文本流中）：float浮动元素
      5、****能产生stack-context的inline元素。
                 否则，将位于3之前。
      6、定位元素：z-index为0或者为auto的定位元素
      7、定位元素：z-index为正的定位元素

      在定位元素中又包含 absolute 和 relative 两种。两者在stack level上有差别吗

      直接上例子。通过例子可以发现 absolute 和 relative 在stack-level上属于同一级别，谁在前面仅和文档流的先后顺序有关。

<!DOCTYPE HTML>
<html>
 <head>
  <title> 测试Stack-level </title>
  <meta charset="utf-8"/>
  <style>
        .p,p{    width:100px;    height:100px;}
  </style>
 </head>
 <body>
      <div id="container" style="background-color:#eee;">0.这是父级元素
            <p style="position:absolute;top:0px;left:0px;   background-color:red" >1.这是一个absolute的定位元素</p>
            <p style="position:relative;top:50px;left:50px; background-color:green;color:white">2.这是一个relative的定位元素</p>
            <span class="p" style="display:inline;background-color:black;color:white">8.这是一个inline的元素</span>
            <p style="margin-top:-50px;margin-left:20px;background-color:yellow">3.这是一个非定位的块级元素</p>
            <p style="float:left;background-color:pink;margin-top:-90px;margin-left:40px;">4.这是一个浮动的块级元素</p>
            <p style="position:absolute;top:90px;left:60px; background-color:purple;z-index:1;color:white">6.这是一个relative的定位元素</p>
            <p style="position:absolute;top:70px;left:100px; background-color:blue;color:white">5.这是一个relative的定位元素</p>            
      </div>
 </body>
</html>

在chrome中的显示如下图所示：

可见这里inline是在block和float之前的，通过这个例子可以发现chrome是完全遵循w3c对于stack-level定义的。

经测试发现ie8、 ie9、 ff、 chrome、 safari都是ok的。那么最后看一下万恶的ie6，哇，各种不正常。

有人说IE下（无论ie6.0或者ie7.0）“float元素”和“block元素”属同一stack level，而“inline元素”较其stack level低。

于是写个简单的例子验证一下

<!DOCTYPE HTML>
<html>
 <head>
  <title> 测试Stack-level </title>
  <meta charset="utf-8"/>
  <style>
        .p,p{    width:100px;    height:100px;}
  </style>
 </head>
 <body>
      <div id="container" style="background-color:#eee;">0.这是父级元素    
            <p style="float:left;background-color:pink;">4.这是一个浮动的块级元素</p>
            <p style="background-color:yellow;margin-left:-10px;">3.这是一个非定位的块级元素</p>
            
      </div>
 </body>
</html>

正常的显示应该是

而在ie7中，显示为：

发现在IE中浮动块级元素和非定义的块级元素是不会重叠的，始终出现在同一层。除非给元素加position。

由于ff版本都出到13.0.1，基本上是非常规范的。有很多地方解释ff2的异常，即 z-index为负的定位元素的stack level

比父级stacking context（此处是root stacking context）低，所以显示在root stacking context下方。故不能看见。

这里需要用opacity（1除外）去触发stack-context。

由于本人没装ff2，这种情况就不作验证啦