层叠，即页面各个元素在Z轴方向上的先后顺序，谁压着谁，谁覆盖着谁。其中z轴定义如下，也就是垂直于显示器的方向，
css中，有一套自己的层叠计算规则，其中主要包含以下几个概念：
- 层叠上下文 Stacking Context，是一个独立的渲染区域，类似于 BFC IFC 你也可以把它理解为CSS渲染中的一个 "结界" 在这个区域内，有一套自己的层叠规则，内部的层叠不影响外部的层叠。
- 层叠水平 stacking level 也就是各个元素在Z轴上的排布顺序，css中有一套逻辑来确定各个元素的层叠水平，层叠水平高的盒子压着层叠水平低的盒子
- 层叠顺序 stacking order 层叠顺序不是一个概念或者一个区域，它是一套规则，也就是我们上面说的，css中确定各个元素层叠水平的一套规则
- z-index 其定义是，决定定位元素或者flex子元素在z轴方向的层叠水平，zindex大的盒子会覆盖zindex小的盒子。 这里需要特殊说明下其作用对象为 定位元素 或 flex-item 元素，我们经常会给普通块元素设置zindex, 其实是不起作用的，zindex只对 "漂起来的"盒子起作用。（zindex默认值为auto）
这里需要注意，浮动元素可以理解为漂在文档流上面，仅仅贴着文档流的，类似于水面上的救生圈，所以浮动元素的zIndex也不起作用!
层叠上下文
层叠上下文也是CSS中一块独立的渲染区域，在其内部有一套层叠的排布规则，并且内部的元素层叠不会影响外部元素。类比BFC IFC 我们背过形成BFC IFC的条件，层叠上下文也同样有。
如何开启层叠上下文?
- 根html元素是一个层叠上下文，天生是，这类似于html天生是BFC一样，所有的盒子都拍不在最外层的层叠上下文内！
- 定位元素，即position为relative absolute fixed sticky （不为static）元素，并且其zIndex不为auto的情况下。注意，zindex默认值为auto，所以定位元素默认情况下也不开启层叠上下文，需要将其zindex设置为数字
- flex / grid 布局元素的子元素 即flex-item grid-item 并且其zindex不为auto 类似上面
- opacity不为1的元素
- transform 不为none的元素
- 还有其他一些 用得少 就不细说了，主要就是上面这些，想了解可以查看MDN文档
当层叠上下文被开启时，其内部有一套独立的排布顺序，其子元素会按照层叠顺序确定一套属于本层叠上下文的层叠水平。需要注意，我们说元素的排布顺序一定是在同一个层叠上下文范围中的，如果是两个不同层叠上下文中的元素，那么直接比较其对应的层叠上下文的层叠顺序，层叠顺序低的上下文其中所有子元素的层叠水平都低，即便高层叠上下文中子元素的z-index: -9999 其层叠水平也是在低层叠上下文中所有元素之上的，你可以理解为 "站在巨人的肩膀上!"
看一个例子，其中粉红色区域开启了层叠上下文，其内部的橙色，绿色元素 不论zindex为多少，即便为-9999 其层叠水平也是高于z-index: auto的绿色元素的，但是低于zindex=3的蓝色元素
层叠水平
这个概念就比较简单了，就是各个元素在z轴方向的排布顺序,不论是什么元素，是否开启层叠上下文，都有层叠水平的概念，但是一般情况下我们对层叠水平的对比，都会先定在一个层叠上下文之下，对于不同层叠上下文中元素的层叠水平，会转而对比其所在层叠上下文的层叠水平。
需要注意， z-index可以影响层叠水平，之所以说是影响，因为其只作用于定位元素/flex,grid布局的子元素！
层叠顺序
层叠顺序相对比较重要，其是一套规范，用来确定各个元素之间的层叠水平，其实主要记住一张图即可！
简单解释一下
- 最下面的是开启层叠上下文的元素，这个元素的层叠水平最低
- 再其次是z-index < 0 的盒子 其优先级是低于块盒子的，也就是在常规文档流之下
- 在往上就是常规文档流了，也就是块级元素的层叠水平
- 浮动上面说了，类似于一个"救生圈" 漂浮在常规文档流上面，紧贴着，所以其虽然高度更高，但是也不能悬空起来，自然也就没有z-index作用了！
- 为什么行内级元素要高于浮动，可以理解为行内级元素紧贴着浮动这个救生圈，为什么？ 因为行内盒子主要用来展示内容，而类似于浮动，块元素用来布局，css是重内容的，其在上面也就不奇怪了。想一下，浮动元素上的文字也没有被浮动元素本身覆盖上 是不是。
- 下面一层要着重说一下，我把这层分成两类
- 一类是，元素开启层叠上下文后，其默认层叠水平就在这层，比如说设置了opacity 0.8 比如定位元素设置了zindex为数字，比如flex-item元素设置了zindex为数字 等等 都默认在这层
- 一类是，没开启层叠上下文, 其本身就在这个层，开启层叠上下文之后，其默认也是在这个层，包含z-index起作用的元素 比如flex-item / grid-item 定位元素. 由于只有这两类元素的zindex是起作用的，所以其可以在z轴上移动，其他的元素不论是否开启层叠上下文，都不能移动。 所以我们说，对于没有飘起来的元素，不用设置其zindex 因为设置也没用，只能让飘起来的元素设置zindex<0 到当前元素的下面！
- 最后就是z-index >0 越高 层级越高！