auto ：生成的盒子在当前堆叠上下文中的堆叠层级是 0 。这个盒子不会创建一个新的堆叠上下文，除非是根元素。
在 CSS 2.1 中，每个盒子在三个纬度上，都有一个位置。除了它们的垂直和水平位置，盒子沿着 “Z 轴”排列，且在另外某个层级之上格式化。当盒子在视觉上重叠时，与 Z 轴的位置关系密切。接下来会讨论盒子在 Z 轴上可能如何放置。
渲染树绘制到画布上的顺序是根据堆叠上下文描述的。堆叠上下文可以包含更多的堆叠上下文。从父堆叠上下文的角度来看，堆栈上下文具有原子单一性。每个盒子属于一个堆叠上下文。在给定的堆叠上下文 A 中，每个已定位的盒子拥有一个整数堆叠层级，该整数堆叠层级在 Z 轴上的位置，是相对于在堆叠上下文 A 中的其它堆叠层级。
引子
最近在使用第三方组件的时候，发现无法在一个弹窗里面再次正常覆盖已有弹窗。首先想到跟堆叠层级属性
z-index有关，于是再次回顾总结一下。z-index
定位元素是指
position的值为非static的元素。对于定位元素，z-index属性指定了：取值有下面的含义：
在 CSS 2.1 中，每个盒子在三个纬度上，都有一个位置。除了它们的垂直和水平位置，盒子沿着 “Z 轴”排列，且在另外某个层级之上格式化。当盒子在视觉上重叠时，与 Z 轴的位置关系密切。接下来会讨论盒子在 Z 轴上可能如何放置。
渲染树绘制到画布上的顺序是根据堆叠上下文描述的。堆叠上下文可以包含更多的堆叠上下文。从父堆叠上下文的角度来看，堆栈上下文具有原子单一性。每个盒子属于一个堆叠上下文。在给定的堆叠上下文 A 中，每个已定位的盒子拥有一个整数堆叠层级，该整数堆叠层级在 Z 轴上的位置，是相对于在堆叠上下文 A 中的其它堆叠层级。
堆叠层级高的盒子总是在堆叠层级低的盒子之上格式化。盒子也可能有负的堆叠层级。在同一堆叠上下文中，相同的堆叠层级根据文档树的顺序从后到前堆叠。
根元素形成根堆叠上下文。其它堆叠上下文，由拥有
z-index属性值是auto之外有效值的任何非static定位元素产生。堆叠上下文不一定与包含块有关。在将来的 CSS 层级中，其它属性可能会引入堆叠上下文，例如opacity。在每个堆叠上下文中，下面的层级按照从后到前的顺序绘制：
在每个堆栈上下文中，堆叠级别为 0 、非定位浮动、内联块和内联表的定位元素，绘制时好像这些元素本身生成了新的堆栈上下文，但其定位的子体和任何可能的子堆叠上下文都参与当前堆叠上下文。
这个绘制顺序递归的应用于每一个堆叠上下文，详细的定义见 Appendix E 。
根据上面的标准描述，结合常见的情况，进一步理解。
示例
相同层级堆叠
这是示例页面，移动端访问如下：
前面有介绍，
z-index指定了在当前堆叠上下文中的堆叠层级，因此先要确定示例中的三个元素所在的堆叠上下文是谁建立的。示例中只有三个元素及其父元素是定位元素，父元素没有指定z-index，所以其所在的堆叠上下文由根元素建立。z-index的值越大，显示越靠近用户，符合标准中的描述。不同层级堆叠
不同层级之间还可以分为：父元素都没有堆叠层级、父元素之一有堆叠层级、父元素都有堆叠层级。
这是示例页面，移动端访问如下：
针对上面的现象，分别根据标准进行解析：
z-index值越大，显示越靠近用户，所以容器 1 后代显示在 容器 2 后代之上。z-index值更大，显示更靠近用户，所以容器 2 后代显示在容器 1 之上。根据标准，堆叠上下文可以包含更多的堆叠上下文，后代堆叠上下文的绘制是在父堆叠上下文内，因此容器 2 后代显示在容器 1 后代 之上。z-index值更大，因此容器 1 显示在容器 2 之上。各自的后代都是基于父级堆叠层级进行绘制，因此容器 1 显示在容器 2 后代之上，容器 1 后代 显示最靠近用户。参考资料
:wastebasket:
最近接触到几部关于异世界题材的番剧，想到之前看到的类似题材的作品，发现日本人还真是会玩花样，一点点的不同，故事的发展和走向，就会给人的感觉不一样，稍微的比较了一下其中的套路： - 套路一：被召唤到异世界，一般是皇族宗教，然后要求拯救世界，拥有特殊能力，给了装备武器，但要自己组队打怪升级。 - 套路二：跟套路一不同之处，就是一次性会召唤多个勇者。 - 套路三：被神召唤出来，说明事由，跟神组队一起去异拯救世界，拥有特殊能力，需要打怪升级。 - 套路四：无意间进入到异世界，人生地不熟，碰到特定人物，拥有特殊能力，没有装备或本就不需要，需要组队打怪升级。 - 套路五：无意间进入到异世界，碰到一个历史时代，跟随历史事件发展。 - 套路六：有一个独特的空间，通向各个异世界，已这个空间为中心展开剧情。