关于stacking context和CSS z-index的总结
HTML中决定元素叠加顺序的CSS属性最有名的应该是z-index了。但是，往往在项目中发现有些情况和我们的预期不太一致。经过研究和学习，总算搞清楚了其中的关系。简单总结如下：
- 只有Positioned（Position不为static的元素）元素的z-index属性才有效
- z-index可以是负数
- 没有z-index或z-index无效的元素（参见第一条）相当于z-index为0；
- 符合某些条件(注1)的元素，浏览器会为它们创建一个叫stacking context的东东。根据DOM树结构，stacking context也会形成一个树形结构。
- 一个stacking context中的元素会根据z-index决定叠加顺序。z-index大的靠前
- z-index 0级元素中，有stacking context的元素的叠加顺序靠前
- 以上条件不能区分时，使用DOM树中的顺序决定叠加顺序。
其中细节很多，我也不确定自己的理解都是正确的。欢迎大家指正。
另外，下面是MDN中的一系列相关文章。逐层展开，写得很清楚，各位做WEB的同学可以学习一下。
- Stacking without z-index : Default stacking rules
- Stacking and float : How floating elements are handled
- Adding z-index : Using z-index to change default stacking
- The stacking context : Notes on the stacking context
- Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
- Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
- Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
-- 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的总结的更多相关文章
- CSS——关于z-index及层叠上下文（stacking context）
以下内容根据CSS规范翻译. z-index 'z-index'Value: auto | <integer> | inheritInitial: autoApplies to: posi ...
- 层叠上下文(The stacking context)
MDNThe stacking context 层叠上下文是HTML元素的三维概念,这些HTML元素在一条假想的相对于面向(电脑屏幕的)视窗或者网页的用户的z轴上延伸,HTML元素依据其自身属性按照优 ...
- 层叠上下文 Stacking Context
层叠上下文 Stacking Context 在CSS2.1规范中,每个盒模型的位置是三维的,分别是平面画布上的x轴,y轴以及表示层叠的z轴.对于每个html元素,都可以通过设置z-index属性来设 ...
- 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: ...
- CSS:Stacking Context
通常情况下,HTML页面可以被认为是二维的,因为文本,图像和其他元素被排列在页面上而不重叠.在这种情况下,只有一个渲染进程,所有元素都知道其他元素所占用的空间.z-index属性可让你在渲染内容时调整 ...
- The stacking context
文档中的层叠上下文由满足以下任意一个条件的元素形成: 1. z-index 值不为 "auto"的 绝对/相对定位. 2. position位fixed. 3. opacity 属 ...
- 深入理解CSS中的层叠上下文和层叠顺序(转)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...
- 深入理解CSS中的层叠上下文和层叠顺序
零.世间的道理都是想通的 在这个世界上,凡事都有个先后顺序,凡物都有个论资排辈.比方说食堂排队打饭,对吧,讲求先到先得,总不可能一拥而上.再比如说话语权,老婆的话永远是对的,领导的话永远是对的. 在C ...
- [转]深入理解CSS中的层叠上下文和层叠顺序
http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/ 零.世间的道理都是 ...
随机推荐
- Linux下好玩的命令
1.yes命令,输出很多个y,可以用来对付选择很多y/n的应用. 2.banner命令,打印字符标题,就是用字符拼出大字来: 3.ddate命令,把日历转换成其他的什么历: 4.fortune命令,随 ...
- Virtualbox修改bios信息安装Windows XP OEM
转载 http://hi.baidu.com/guoyao11/item/631ad6eb4fb3d93887d9de11 具体方法有两个: 1.把下面的代码复制改后缀为BAT文件直接运行即可,以Le ...
- VS2013_QT255开发相关技巧理解心得
1. 在VS2013中打开QTCreater新建的项目 (1)通过双击.ui 打开QT的设计器,然后修改. (2)通过QT设计器,新建ui文件,放在VSQT的工程中 但是需要对此xxx.ui文件,进行 ...
- [MSSQL2012]First_Value函数
First_Value返回结果集中某列第一条数据的值,跟TOP 1效果一样,比较简单的一个函数 先贴测试用代码 DECLARE @TestData TABLE( ID INT IDENTITY ...
- SQL SERVER 数据库查询表和字段信息语句
--数据库中所有表的信息(很强悍的) SELECT 表名 = CASE WHEN A.COLORDER=1 THEN D.NAME EL ...
- 除非 Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态，否则无法启动网站。目前，这两项服务均处于停止状态。
win7 IIS 所有网站都停止了,启动提示: 除非 Windows Activation Service (WAS)和万维网发布服务(W3SVC)均处于运行状态,否则无法启动网站.目前,这两项服务均 ...
- git删除push到远程服务器的commit
如果不小心把不该提交的代码或者敏感的数据(如密码)提交到远程git服务器上,可以使用git reset回滚到上一个commit,并且commit history不留下任何痕迹. 具体做法: # 1.通 ...
- EF结合三层：三层中数据层父类和业务层父类的使用
今天我们主要讨论下数据层父类和业务层父类的使用.众所周知,数据层无非就是实现增删改查的方法.无论是哪个实体类,无非就是为了实现增删改查方法,所有我们在三层的DAL层封装了一个BaseDAL类,来做增删 ...
- GCD使用dispatch_group_notify、dispatch_group_enter、dispatch_group_leave处理多线程同步操作
一.简介 dispatch_group_enter:通知group,下面的任务马上要放到group中执行了. dispatch_group_leave:通知group,任务完成了,该任务要从group ...
- paip.广告过滤系统 php 实现
paip.广告过滤系统 php 实现 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.net/at ...