1. 层叠的定义
层叠上下文，英文称作 stacking context，是 HTML 中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在 z 轴上就有一定优先级
层叠水平，英文称作 stacking level，决定了同一个层叠上下文中元素在 z 轴上的显示顺序。
不要把层叠水平和 CSS 的 z-index 属性混为一谈。尽管某些情况下 z-index 确实可以影响层叠水平，但是只限于定位元素以及 flex 盒子的flex item元素；因为所有的元素都存在层叠水平
2. 层叠顺序
注意：
- inline 水平盒子指的是包括 inline/inline-block/inline-table 元素的“层叠顺序”，它们都是同等级别的。
- 单纯从层叠水平上看，实际上 z-index:0 和 z-index:auto 是可以看成是一样的。注意这里的措辞—“单纯从层叠水平上看”，实际上，两者在层叠上下文领域有着根本性的差异。
层叠准则：
（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的 z-index 属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在 DOM 流中处于后面的元素会覆盖前面的元素
3. 深入层叠上下文
3.1 层叠上下文创建
（1）根层叠上下文
页面根元素天生具有层叠上下文，称为根层叠上下文。。因此，页面中所有的元素一定处于至少一个“层叠结界”中。
（2）定位元素与传统层叠上下文
对于 position 值为 relative/absolute 以及 Firefox/IE 浏览器（不包括 Chrome 浏览器）下含有 position:fixed 声明的定位元素，当其 z-index 不是 auto 的时候（默认是auto），会创建层叠上下文。
3.2 层叠上下文特点
层叠上下文元素的主要特性：
- 层叠上下文的层叠水平要比普通元素高（比如层叠上下文元素设置的z-index即使小于普通元素设置的z-index，也会在普通元素上面）
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。
- 每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
案例1：
<div style="position:relative; z-index:auto;">
<!-- 人像图片 -->
<img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:auto;">
<!-- 景色图片 -->
<img src="2.jpg" style="position:relative; z-index:1;">
</div>
z-index: auto所在的div元素是一个普通定位元素，于是，里面的两个img元素的层叠比较就不受父级的影响，两者直接套用“层叠黄金准则”。这里，两个img元素有着明显不一的z-index 值，因此遵循“谁大谁上”的准则。人像图片在景色图片上面。
案例2：
<div style="position:relative; z-index:0;">
<!-- 人像图片 -->
<img src="1.jpg" style="position:absolute; z-index:2;">
</div>
<div style="position:relative; z-index:0;">
<!-- 景色图片 -->
<img src="2.jpg" style="position:relative; z-index:1;">
</div>
而 z-index 一旦变成数值，哪怕是 0，就会创建一个层叠上下文。此时，层叠规则就发生了变化。层叠上下文的特性里面最后一条是自成体系。两个img元素的层叠顺序比较变成了优先比较其父级层叠上下文元素的层叠顺序。这里，由于外面的两个div元素都是z-index:0，两者层叠顺序一样大，此时遵循“层叠黄金准则”的另外一个准则“后来居上”，根据在DOM 文档流中的位置决定谁在上面，于是，景色图片在人像图片上面。
文章参考资料：张鑫旭《CSS世界》
