CSS 属性 z-index
引子
最近在使用第三方组件的时候，发现无法在一个弹窗里面再次正常覆盖已有弹窗。首先想到跟堆叠层级属性 z-index 有关，于是再次回顾总结一下。
z-index
| Name | z-index |
|---|---|
| 可取值 | auto | <integer> | inherit |
| 默认值 | auto |
| 适用于 | 定位元素 |
| 继承性 | 无 |
定位元素是指 position 的值为非 static 的元素。对于定位元素，z-index 属性指定了：
- 盒子在当前堆叠上下文（stacking context）中的堆叠层级。
- 盒子是否创建一个堆叠上下文。
取值有下面的含义：
- <integer> ：是生成的盒子在当前堆叠上下文中的堆叠层级。这个盒子也会创建一个新的堆叠上下文。
- auto ：生成的盒子在当前堆叠上下文中的堆叠层级是 0 。这个盒子不会创建一个新的堆叠上下文，除非是根元素。
在 CSS 2.1 中，每个盒子在三个纬度上，都有一个位置。除了它们的垂直和水平位置，盒子沿着 “Z 轴”排列，且在另外某个层级之上格式化。当盒子在视觉上重叠时，与 Z 轴的位置关系密切。接下来会讨论盒子在 Z 轴上可能如何放置。
渲染树绘制到画布上的顺序是根据堆叠上下文描述的。堆叠上下文可以包含更多的堆叠上下文。从父堆叠上下文的角度来看，堆栈上下文具有原子单一性。
每个盒子属于一个堆叠上下文。在给定的堆叠上下文 A 中，每个已定位的盒子拥有一个整数堆叠层级，该整数堆叠层级在 Z 轴上的位置，是相对于在堆叠上下文 A 中的其它堆叠层级。
堆叠层级高的盒子总是在堆叠层级低的盒子之上格式化。盒子也可能有负的堆叠层级。在同一堆叠上下文中，相同的堆叠层级根据文档树的顺序从后到前堆叠。
根元素形成根堆叠上下文。其它堆叠上下文，由拥有 z-index 属性值是 auto 之外有效值的任何非 static 定位元素产生。堆叠上下文不一定与包含块有关。在将来的 CSS 层级中，其它属性可能会引入堆叠上下文，例如 opacity 。
在每个堆叠上下文中，下面的层级按照从后到前的顺序绘制：
- 形成堆叠上下文元素的背景和边逛。
- 负堆叠层级的后代堆叠上下文。
- 在文档流，非内联，非定位后代。
- 非定位浮动。
- 在文档流，内联，非定位后代，包括内联表格和内联块。
- 堆叠层级为 0 的后代堆叠上下文和堆叠层级为 0 的定位后代。
- 有正数堆叠层级的后代堆叠上下文。
在每个堆栈上下文中，堆叠级别为 0 、非定位浮动、内联块和内联表的定位元素，绘制时好像这些元素本身生成了新的堆栈上下文，但其定位的子体和任何可能的子堆叠上下文都参与当前堆叠上下文。
这个绘制顺序递归的应用于每一个堆叠上下文，详细的定义见 Appendix E 。
根据上面的标准描述，结合常见的情况，进一步理解。
示例
相同层级堆叠
这是示例页面，移动端访问如下：
前面有介绍，z-index 指定了在当前堆叠上下文中的堆叠层级，因此先要确定示例中的三个元素所在的堆叠上下文是谁建立的。示例中只有三个元素及其父元素是定位元素，父元素没有指定 z-index ，所以其所在的堆叠上下文由根元素建立。z-index 的值越大，显示越靠近用户，符合标准中的描述。
不同层级堆叠
不同层级之间还可以分为：父元素都没有堆叠层级、父元素之一有堆叠层级、父元素都有堆叠层级。
这是示例页面，移动端访问如下：
针对上面的现象，分别根据标准进行解析：
- 父元素都没有堆叠层级 ：首先找出有堆叠层级元素所在堆叠上下文，发现示例中堆叠上下文是根元素形成，
z-index值越大，显示越靠近用户，所以容器 1 后代显示在 容器 2 后代之上。 - 父元素之一有堆叠层级：示例中有 3 个元素拥有堆叠层级，容器 2 后代与容器 1 所在堆叠上下文是根元素形成，容器 2 后代的
z-index值更大，显示更靠近用户，所以容器 2 后代显示在容器 1 之上。根据标准，堆叠上下文可以包含更多的堆叠上下文，后代堆叠上下文的绘制是在父堆叠上下文内，因此容器 2 后代显示在容器 1 后代 之上。 - 父元素都有堆叠层级：示例中有 4 个元素拥有堆叠层级，容器 1 和容器 2 所在堆叠上下文是根元素形成，容器 1 的
z-index值更大，因此容器 1 显示在容器 2 之上。各自的后代都是基于父级堆叠层级进行绘制，因此容器 1 显示在容器 2 后代之上，容器 1 后代 显示最靠近用户。
