HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了。但是，往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习，总算搞清楚了其中的关系。简单总结如下：

  1. 只有Positioned（Position不为static的元素）元素的z-index属性才有效
  2. z-index可以是负数
  3. 没有z-index或z-index无效的元素（参见第一条）相当于z-index为0；
  4. 符合某些条件(注1)的元素，浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构，stacking context也会形成一个树形结构。
  5. 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
  6. z-index 0级元素中，有stacking context的元素的叠加顺序靠前
  7. 以上条件不能区分时，使用DOM树中的顺序决定叠加顺序。

其中细节很多，我也不确定自己的理解都是正确的。欢迎大家指正。

另外，下面是MDN中的一系列相关文章。逐层展开，写得很清楚，各位做WEB的同学可以学习一下。

-- 2015-08-04 在和同事的沟通中，又进行了一些补充 ----------------------------------------

z-index是一个比较邪恶的东西，如果不加控制，很容易形成竞争（传说中的摁下葫芦弹起个瓢）。使用的时候应该有一些规划，不要太随意。如果你们项目使用了Less，建议定义一组常量，规定几个级别。大家都尽量想着几个级别上靠。

另外，大多数时候，其实都可以通过Dom结构的适当调整来减少z-index的使用。往往还可以实现更好的灵活性。例如：

我们知道在Web上要实现一个模态对话框，往往是通过两层div实现的，一层div覆盖全屏，阻止其他元素获得消息，一个div承载模态对话框的内容。如下：

 <head>

     <style>

         .modal-backdrop {

             position: absolute;

             left: 0; top: 0;

             right: 0; bottom: 0;

             background-color: black;

             opacity: 0.6; z-index: 1000;

         }

         .modal-dialog {

             position: absolute;

             width: 800px;

             z-index: 1001;

         }

     </style>

 </head>

 <body>

     <!-- origin web contents -->

     <div class="modal-backdrop"></div>

     <div class="modal-dialog">

         <!-- Modal dialog content -->

     </div>

 </body>

这样的设计，需要两个z-index值，增加了冲突的风险。并且没有办法支持多次弹出模态对话框（第一次弹出的dialog压在了第二次弹出的backdrop的上面，但是，我们期望第二次弹出的backdrop可以遮住第一次弹出的对话框内容。）。

正确的解决方法应该如下：

 <head>

     <style>

         .modal-backdrop {

             width: 100%; height: 100%;

             background-color: black;

             opacity: 0.6; z-index: 1000;

         }

         .modal-dialog {

             position: absolute;

             left: 0; top: 0;

             right: 0; bottom: 0;

             z-index: 1000;

         }

         .modal-content {

             width: 800px;

         }

     </style>

 </head>

 <body>

     <!-- origin web contents -->

     <div class="modal-dialog">

         <div class="modal-backdrop"></div>

         <div class="modal-content">

             <!-- Modal dialog content -->

         </div>

     </div>

 </body>

通过增加了一层Dom结构，只需要使用一个z-index，而且，多次弹出的时候，后面的backdrop可以很好的覆盖前面的对话框内容。

-- 2015-09-21 发现一个细节点 ----------------------------------------

4. 符合某些条件的元素，浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构，stacking context也会形成一个树形结构。

注1：Element with transform, Element with opacity等条件中的Element如果Display是inline的，不会创建Stacking context。因此，往往需要将他们的display改为inline-block.

关于stacking context和CSS z-index的总结的更多相关文章

  1. CSS——关于z-index及层叠上下文（stacking context）

    以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...

  2. 层叠上下文(The stacking context)

    MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...

  3. 层叠上下文 Stacking Context

    层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...

  4. CSS - 层叠上下文（The stacking context）

    对 MDN 的上的例子的拓展 Root - DIV #1(z-index: 5) - DIV #2(z-index: 2) - DIV #3(z-index: 4) - DIV #4(z-index: ...

  5. CSS:Stacking Context

    通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠.在这种情况下,只有一个渲染进程,所有元素都知道其他元素所占用的空间.z-index属性可让你在渲染内容时调整 ...

  6. The stacking context

    文档中的层叠上下文由满足以下任意一个条件的元素形成: 1. z-index 值不为 "auto"的 绝对/相对定位. 2. position位fixed. 3. opacity 属 ...

  7. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  8. 深入理解CSS中的层叠上下文和层叠顺序

    零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...

  9. [转]深入理解CSS中的层叠上下文和层叠顺序

    http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...

随机推荐

  1. 基于VC的声音文件操作(二)

    (二)VC的声音操作 操作声音文件,也就是将WAVE文件打开获取其中的声音数据,根据所需要的声音数据处理算法,进行相应的数学运算,然后将结果重新存储与WAVE格式的文件中去:可以使用CFILE类来实现 ...

  2. OpenGL（四）——有用的函数

    概述 1. reshape 定义窗口和图像的映射关系,使在不以纵横比4:3调整窗口大小时,图像不会失真 函数 1. ReShape 如果变更后的窗体的横纵比大于4/3,需要以高为基数,宽为高*4/3, ...

  3. WinDbg 命令三部曲：（三）WinDbg SOSEX 扩展命令手册

    本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 系列博文 <WinDbg 命令三部曲:(一)WinDbg 命令手册> <WinDb ...

  4. Python爬虫 -- 抓取电影天堂8分以上电影

    看了几天的python语法,还是应该写个东西练练手.刚好假期里面看电影,找不到很好的影片,于是有个想法,何不搞个爬虫把电影天堂里面8分以上的电影爬出来.做完花了两三个小时,撸了这么一个程序.反正蛮简单 ...

  5. BugTracker 功能说明（有图有真相）

    一.简单介绍 BugTracker是基于Asp.Net,C#, SqlServer的一个web端Bug管理系统.发布在IIS上.能够对不同项目,不同组织,不同人员的bug进行管理和更新设计优先级和用户 ...

  6. 更新页面缓存OutputCache

    为什么要使用OutputCache 我认为OutputCache是最简单的缓存技术了,它针对的是页面级别的,简单的一条指令就可以达到缓存的效果,有效的减轻服务器的压力和减少带宽,对于网站一些不会频繁更 ...

  7. 使用grunt合并压缩js、css文件

    需要了解的知识: 1.nodejs的安装与命令行使用 2.nodejs安装应用 3.grunt的初步了解 本文已假定读者已经熟悉以上知识. 好,我们继续: 任务1:将src目录下的所有zepto及插件 ...

  8. Kafka重复消费和丢失数据研究

    Kafka重复消费原因 底层根本原因:已经消费了数据,但是offset没提交. 原因1:强行kill线程,导致消费后的数据,offset没有提交. 原因2:设置offset为自动提交,关闭kafka时 ...

  9. paip.java UrlRewrite 的原理and实现 htaccess正则表达式转换

    paip.java UrlRewrite 的原理and实现 htaccess正则表达式转换 #---KEYWORD #-正则表达式 正则表达式 表示 非指定字符串开头的正则 排除指定目录.. 作者 老 ...

  10. 使用Alcatraz来管理Xcode插件

    Alcatraz 是一个帮你管理 Xcode 插件.模版以及颜色配置的工具.它可以直接集成到 Xcode 的图形界面中,让你感觉就像在使用 Xcode 自带的功能一样. 安装和删除 使用如下的命令行来 ...