一、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

假如只是开发简单的弹窗效果，懂得通过z-index来调整元素间的层叠关系就够了。但要将多个弹窗间层叠关系给处理好，那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了。本文作为对W3C Recommendation-Layered presentation学习后整理的笔记，以便日后查阅。

由于将英文名词翻译为中文名词容易产生歧义（如Normal flow被翻译为文档流），因此本文将直接采用原英文名词，而涉及到的英文名词解释如下：

non-positioned element：无CSS定位的元素，也就是position: static的元素。

positioned element：CSS定位的元素，也就是position: relative/float/absolute的元素。

box：文档树由element组成，渲染树由box组成，实际进行元素大小、布局渲染操作的对象是box进行而不是element。box由element对应生成（也有是anonymous box不是由element对应生成，而是渲染器根据规则自动生成），non-positioned element对应的是non-position box，positioned element对应的是position box。

 z-axis：box定位坐标系中的z轴。

stacking context：层叠上下文，z-axis的基本组成单位。box与stacking context的映射关系为N:1。每个stacking context有一个父context（除了root stacking context外）和0~N个子context。

root stacking context：与根box（html/body对应的box）对应的层叠上下文，是其他stacking context的祖先context，root stacking context的范围覆盖整条z-axis。

stack level：层叠等级，当N个box位于同一个stacking context中，则通过stack level来决定它们位于z-axis上的位置。注意：stack level为相对值而非如px那样为绝对值。

二、图解分层显示                                                                          

其实我们常接触到的z-index只是分层显示中的一个属性而已，而理解z-index背后的原理实质上就是要理解分层显示原理。下面我们通过一个示例来认识一下分层显示涉及的对象和属性（z-axis、(root) stacking context、box、stack level）以及它们之间的关系。

HTML Markup

<style type="text/css">

  div{position:relative;}

</style>

<body>

  <div id="d1" style="z-index:10;">

    <div id="d4" style="z-index:-9999;"></div>

  </div>

  <div id="d2" style="z-index:8;"></div>

  <div id="d3" style="z-index:9;"></div>

  <p id="p1"><p>

</body>

说明：

1. 在构造渲染树时会为element生成对应的box，所以div#d1->d1:box,div#d2->d2:box,div#d3->d3:box,div#d4->d4:box,p#p1->p1:box。

2. 对于positioned box而言，若z-index属性值不是0，则会创建一个新的stacking context，并且其子孙box将属于这个新stacking context。

3. 同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。如示例般，虽然-9999比10小，但由于d4:box和d1:box位于不同的stacking context，因此无法判断哪个box更靠近用户。

三、层叠规则　　　　　　　　　　　　　　　　　　　　　　　　　　

层叠规则就是决定到底哪个box更靠近用户。

1. 前提：boxes属于同一个stacking context，并且z-index相同

      规则：按照box对应的element在文档树的顺序，后者比前者更靠近用户（back-to-front）

<!-- 两种情况下，d2均排在d1的后面，因此d2在z-axis上位于d1的上面 -->

<div id="d1">

  <div id="d2">

  </div>

</div>

<div id="d1">

</div>

<div id="d2">

</div

  2. 前提：boxes属于同一个stacking context，并且z-index不同

      规则：z-index属性值大的box更靠近用户

<!-- d1的z-index为12，而d2的z-index为0，所以d1在d2的上面 -->

<div id="d1" style="position:relative;z-index: 12;">

</div>

<div id="d2" style="z-index: 0;margin-top:-20px;">

</div

3. 前提：boxes属于不同的stacking context，并且stacking contexts没有祖孙/父子关系

      规则：boxes会向上沿着父box进行搜索，直到父boxes属于同一个stacking context为止，然后比较父boxes的z-index属性值，z-index属性值大的box更靠近用户。

<div>

  <div id="d1" style="position:relative; z-index:10;">

    <div id="d4" style="background:red; width:100px; height:100px;position:relative; z-index:9999;">d3</div>

  </div>

  <div id="d2" style="background:blue; width:50px; height:50px; position:relative; top: -120px; z-index:9;">d2</div>

  <div id="d3" style="background:green; width:50px; height:50px; position:relative; top: -80px; position:relative; z-index:11;">d3</div>

</div>

  4. 前提：boxes属于不同的stacking context，并且stacking contexts为祖孙/父子关系

      规则：属于子stacking context的box必定更靠近用户

<div style="background:blue; width:100px; height:100px; position:relative; z-index:10;">

  <div style="background:red; width:50px; height:50px; position:relative; z-index:-10;"></div>

</div>

四、z-index的作用　　　　　　　　　　　　　　　　　　　　　　　　

啰嗦一句：同一个stacking context的z-index才具有可比性，也就是说在讨论z-index时必须带说明是哪个stacking context下的z-index。

它有两个作用：1. 设置box在其所属的stacking context下的stack level；

2. 当z-index属性值非0时，则在该box中创建一个新的stacking context，而该box的子孙box默认属于这个新stacking context。

注意：z-index的默认值为auto，自动赋值为0。因此默认情况下不会创建新的stacking context。

  z-index生效的阀门

z-index属性值仅对positioned box生效，而non-positioned box的z-index永远为0。

也许你会举出如下反例：

<div id="d1" style="z-index:10;"></div>

<script type="text/javascript">

  console.log(window.getComputedStyle(document.getElementById('d1'))['zIndex']); // 输出10

</script>

但抱歉的是，上面获取的是non-positioned element div#d1的z-index属性值，而不是non-positioned box的z-index属性值。

对于positioned element，它会将z-index赋予给对应的positioned box，而non-positioned element则不会。

五、兼容性问题——IE6/7的诡异行为　　　　　　　　　　　　　　　　

IE6、7中并非当positioned box并且z-index不为0时才创建stacking context，而是positioned box就会创建stacking context。

<style>

    .parent{width:200px; height:200px; padding:10px;}

    .sub{text-align:right; font:15px Verdana;width:100px; height:100px;}

    .lt50{left:50px;top:50px;}

</style>

<div style="position:absolute; background:lightgrey;" class="parent">

  <div style="position:absolute;z-index:20;background:darkgray;" class="sub">20</div>

  <div style="position:absolute;z-index:10;background:dimgray;" class="sub lt50">10</div>

</div>

<div style="position:absolute;left:80px;top:80px;background:black;" class="parent">

  <div style="position:absolute;z-index:2;background:darkgray;" class="sub">2</div>

  <div style="position:absolute;z-index:1;background:dimgray;" class="sub lt50">1</div>

</div>

符合W3C标准的渲染效果：

IE6、7下的渲染效果：

六、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　

若有纰漏请大家指正，谢谢！

尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4333164.html  ^_^肥仔John

七、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　

《说说标准——CSS核心可视化格式模型(visual formatting model)之十三：分层的显示(Layered presentation)》

《z-index 默认值引起的兼容性问题》

W3C Recommendation-Layered presentation

你真的理解z-index吗？的更多相关文章

  1. Android菜鸟的成长笔记（4）——你真的理解了吗？

    原文:Android菜鸟的成长笔记(4)--你真的理解了吗? 在上一篇中我们查看了QQ的apk源文件中的布局结构,并仿照QQ完成了我们第一个应用的界面,详细请看<Android菜鸟的成长笔记&g ...

  2. 您真的理解了SQLSERVER的日志链了吗？

    您真的理解了SQLSERVER的日志链了吗? 先感谢宋沄剑给本人指点迷津,还有郭忠辉童鞋今天在QQ群里抛出的问题 这个问题跟宋沄剑讨论了三天,再次感谢宋沄剑 一直以来,SQLSERVER提供了一个非常 ...

  3. 【转】你真的理解Python中MRO算法吗？

    你真的理解Python中MRO算法吗? MRO(Method Resolution Order):方法解析顺序. Python语言包含了很多优秀的特性,其中多重继承就是其中之一,但是多重继承会引发很多 ...

  4. 对于C#中的一些点滴你真的理解了吗？

    废话不多说看题目,看看我们自己真的理解了吗? 1.如下代码输出的结果是什么? public class A{ public virtual void Func(int  number=10) { Co ...

  5. 我想这次我真的理解了 JavaScript 的单线程机制

    今天面试的时候被问到一个问题,是关于 JS 异步的.当时我脑海中闪过了一个单线程的概念,但却没有把真正的原理阐述清楚.所以回来特意重新回顾了前面单线程和异步相关的一些知识点. 虽然之前学习的时候也接触 ...

  6. 你真的理解Java 注解吗？

    你真的理解Java 注解吗? 1.什么是注解? 官方解释: Java 注解用于为 Java 代码提供元数据.作为元数据,注解不直接影响你的代码执行,但也有一些类型的注解实际上可以用于这一目的.Java ...

  7. Java随谈（六）## 我们真的理解 Java 里的整型吗？

    我们真的理解 Java 里的整型吗 整型是我们日常生活中最常用到的基础数据类型,看这篇文章之前,我想问: 我们真的像自己认为的那么理解 Java 内的整型吗? 也许看完本篇文章你就有自己的答案. C ...

  8. CSS魔法堂：你真的理解z-index吗？

    一.前言 假如只是开发简单的弹窗效果,懂得通过z-index来调整元素间的层叠关系就够了.但要将多个弹窗间层叠关系给处理好,那么充分理解z-index背后的原理及兼容性问题就是必要的知识储备了.本文作 ...

  9. Java内存模型原理，你真的理解吗？

    [51CTO.com原创稿件]这篇文章主要介绍模型产生的问题背景,解决的问题,处理思路,相关实现规则,环环相扣,希望读者看完这篇文章后能对 Java 内存模型体系产生一个相对清晰的理解,知其然知其所以 ...

随机推荐

  1. Tornado

    Tornado 是 FriendFeed 使用的可扩展的非阻塞式 web 服务器及其相关工具的开源版本.这个 Web 框架看起来有些像web.py 或者 Google 的 webapp,不过为了能有效 ...

  2. Rstudio匹配中文

    之前在操作csv文件时一般是将中文字符在excel或用Perl将其中的中文转换成对应的英文,但是最近碰到不得不在R里面进行中文符操作,发现R里面的匹配是无法识别的中文符的.比如: df <- r ...

  3. DIY--主板跳线接法

    如下图:

  4. 在asp.net 中应用POST传递和接收XML文件以及参数.(转)

    使用POST方式可以向别的页面发送请求,并获取返回结果. 可以从一个页面发送POST到另一个页面,也可以在winform工程中使用HTTPRequest发送POST到一个页面.我们拿ASP.NET的a ...

  5. [SQL] 不知道是什么存储过程

    CREATE PROCEDURE dt_DXS_STAFF_ACTIVE @STAFFSTATUS INT, @STAFFNUM INT, @STARTNO INT, @@TOTALCOUNT INT ...

  6. nyoj 88 汉诺塔(一)

    点击打开链接 汉诺塔(一) 时间限制:1000 ms  |  内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...

  7. 临时改GCC编译器，重启后失效

    临时改GCC编译器,重启后失效.例如,用如下命令: export CROSS_COMPILE= <gcc 文件所在的目录>/arm-linux-gnueabihf- 本例中使用的命令如下: ...

  8. php中检查文件或目录是否存在的代码小结

    检查文件或目录是否存在 ,我们使用了php中常用的函数file_exists,这个函数就可以实现我想要的功能,下面大家慢慢参考一下下面是一个简单的检查文件是否存在的实例代码: <?php $fi ...

  9. document.styleSheets[0]是个啥

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. java 计算 文件 md5

    public class MD5Check { /** * 默认的密码字符串组合,用来将字节转换成 16 进制表示的字符,apache校验下载的文件的正确性用的就是默认的这个组合 */     pro ...