前言
原文是在前面对transform引起的z-index“失效”探究过程中找到的，非常棒，所以转载分享。本文大多摘自原文，进行了压缩，也加入了我自己的理解，希望对大家有帮助。
默认情况下，网页内容是没有偏移角的垂直视觉呈现，当内容发生层叠的时候，一定会有一个前后的层叠顺序产生。
我们大家可能都熟悉CSS中的z-index属性，需要跟大家讲的是，z-index实际上只是CSS层叠上下文和层叠顺序中的一叶小舟。
一、什么是层叠上下文
层叠上下文，英文称作“stacking context”。是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上“高人一等”。
z轴 表示的是用户与屏幕的这条看不见的垂直线：
具象化 拥有层叠上下文的元素相当于是一个容器，容器里装着其他元素。 不同容器内的元素的高低由容器决定。容器里面的元素，有高低之分，但不会突破容器。
二、什么是层叠水平
“层叠水平”英文称作”stacking level”，决定了同一个层叠上下文中元素在z轴上的显示顺序。
就跟人一样，网页中的元素虽然都是独立个体，但是总有一个类似的排名排序的情况存在。这个就是层叠水平。层叠上下文的层叠水平是优先级更高的层叠水平。
普通元素的层叠水平优先由层叠上下文决定，因此，层叠水平的比较只有在当前层叠上下文元素中才有意义。
注意：千万不要把层叠水平和z-index属性混为一谈。某些情况下z-index确实可以影响层叠水平，但是，只限于定位元素以及flex盒子的子元素，而层叠水平所有的元素都存在。
三、什么是层叠顺序
“层叠顺序”英文称作”stacking order”，表示元素发生层叠时的垂直显示顺序。层叠上下文和层叠水平是概念，而这里的层叠顺序是规则。
在CSS2.1的年代，在CSS3还没有出现的时候（注意这里的前提），层叠顺序规则遵循下面这张图：
这样的设计是由元素的重要性出发的，内容优于布局，布局优于装饰
注意：
- 这是css2的时候
- 这里的
z-index: 0只是表示一个0级别，对应的是z-index: auto，没有创建层叠上下文的级别
四、层叠准则
层叠领域的黄金准则。当元素发生层叠的时候，其覆盖关系遵循下面2个准则：
谁大谁上 当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
后来居上 当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
五、层叠上下文的特性
层叠上下文元素有如下特性：
- 层叠上下文的层叠水平要比普通元素高；
- 层叠上下文可以阻断元素的混合模式；
- 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文；
- 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素；
- 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。
六、层叠上下文的创建
层叠上下文基本是由一些特定的css属性所创建，主要分为三种：
1. 根层叠上下文
页面根元素，也就是滚动条的默认的始作俑者 <html> 元素。这就是为什么，绝对定位元素在left/top等值定位的时候，如果没有其他定位元素限制，会相对浏览器窗口定位的原因。
2. 定位元素与传统层叠上下文
- 设置
position:relative/position:absolute，z-index值不是auto的定位元素 - 设置
position:fixed的定位元素，z-index为任意
3. CSS3与新时代的层叠上下文
- 设置了z-index，且不为auto的flex元素(父元素display:flex|inline-flex)
- 设置了opacity，且不为1的元素
- 设置了transform，且不为none的元素
- 设置了mix-blend-mode值，且不为normal的元素
- 设置了isolation，且为isolate的元素
- 设置了filter值，且不是none的元素
- will-change指定的属性值为上面任意一个
- 设置了-webkit-overflow-scrolling，且为touch的元素
七、层叠上下文与层叠顺序
最终的层叠顺序分两种情况讨论：
- 层叠上下文不依赖
z-index数值，其层叠顺序是z-index: auto，就是z-index: 0的级别，没有创建层叠上下文的元素的级别
- 层叠上下文不依赖
- 层叠上下文依赖
z-index数值，则由z-index决定 也就是两个层叠准则的详细解释，第一个：后来者居上，第二个：谁大谁上。
- 层叠上下文依赖
