一. 层叠上下文
层叠上下文英文称作”stacking context”. 是HTML中的一个三维的概念。可以把「层叠上下文」理解为当官一旦当了官，相比普通老百姓而言，离皇帝更近了，对不对，就等同于网页中元素级别更高，离我们用户更近了。
二. 层叠水平
层叠水平决定了同一个层叠上下文中元素在z轴上的显示顺序。所有的元素都有层叠水平，包括层叠上下文元素，层叠上下文元素的层叠水平可以理解为官员的职级。对于普通元素的层叠水平，我们的探讨仅仅局限在当前层叠上下文元素中。
- 普通元素的层叠等级优先由其所在的层叠上下文决定。
- 层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。
三. 层叠顺序
层叠顺序是一种基本规则，下面的比较只在同一个层叠上下文中才生效！！！
注意：
- 最下层的
background/border"指的是层叠上下文元素的背景和边框。 inline/inline-block元素的层叠顺序要高于block(块级)/float(浮动)元素。- 单纯考虑层叠顺序，
z-index: auto和z-index: 0在同一层级，但这两个属性值本身是有根本区别的。
四. 总的比较套路
-
如果要比较的两个元素在同一个层叠上下文中：
- 依据层叠顺序图，谁的层叠等级大，谁就在上面 -
如果要比较的两个元素不在同一个层叠上下文中：
- 就比较它们所处的层叠上下文等级，等级高的在上面，等级相同的，谁在DOM结构中处于后面，谁就在上面！！
五. 关于层叠上下文的一些注意点
- 层叠上下文的层叠水平要比普通元素高（原因后面会说明）；
- 层叠上下文可以阻断元素的混合模式（见此文第二部分说明）；
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
- 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
翻译成真实世界语言就是：
- 当官的比老百姓更有机会面见圣上；
- 领导下去考察，会被当地官员阻隔只看到繁荣看不到真实民情；
- 一个家里，爸爸可以当官，孩子也是可以同时当官的。但是，孩子这个官要受爸爸控制。
- 自己当官，兄弟不占光。有什么福利或者变故只会影响自己的孩子们。
- 每个当官的都有属于自己的小团体，当家眷管家发生摩擦磕碰的时候（包括和其他官员的家眷管家），都是要优先看当官的也就是主子的脸色。
六. 如何开启/产生层叠上下文
<1> 根层叠上下文 < html >
指的是页面根元素，也就是滚动条的默认的始作俑者<html>元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。
<2> z-index != auto 的定位元素
对于包含有
position:relative/position:absolute的定位元素，以及FireFox/IE浏览器（不包括Chrome等webkit内核浏览器）（目前，也就是2016年初是这样）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。
<3> 一些 css3 新特性
z-index值不为auto的flex项(父元素display:flex|inline-flex)【注意是，子元素会成为层叠上下文，父元素 display:flex ; 子元素 z-index != auto】- 元素的
opacity值不是1. - 元素的
transform值不是none. - 元素
mix-blend-mode值不是normal. - 元素的
filter值不是none. - 元素的
isolation值是isolate. will-change指定的属性值为上面任意一个。- 元素的
-webkit-overflow-scrolling设为touch.
