标签：index 层级 容器 元素 堆叠 上下文 CSS 属性
引子
最近在使用第三方组件的时候，发现无法在一个弹窗里面再次正常覆盖已有弹窗。首先想到跟堆叠层级属性 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 后代 显示最靠近用户。
参考资料
标签：index,层级,容器,元素,堆叠,上下文,CSS,属性 来源： https://www.cnblogs.com/thyshare/p/14360220.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。