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

最新推荐文章于 2019-02-21 11:05:01 发布

alwaysxihe

最新推荐文章于 2019-02-21 11:05:01 发布

阅读量552

点赞数

本文链接：https://blog.csdn.net/alwaysxihe/article/details/45561493

版权

    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，这种情况就不作验证啦

alwaysxihe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用例子验证w3c的stack-level在不同浏览器中的显示

z-index是我们非常熟悉的属性，用来确定定位元素在垂直于显示屏方向的层叠顺序需要明确的是仅仅作用于定位元素，relative和absulute有效。没有继承性。 stack-level不同于z-index，在每一个stacking context中的每个box都有一个stack level，值大的显示在上，值小的显示在下，同一stack-level的遵循后来居
复制链接

扫一扫