什么是层叠上下文？

层叠上下文是HTML中的一个三维概念。可以简单的理解为一个元素如果具备某些特定CSS属性就会成为一个层叠上下文元素，拥有层叠上下文具备的一些特性。这个元素在Z轴上就“高人一等”，最终表现就是它离屏幕观察者更近。

如何成为层叠上下文元素？

根元素（HTML）
position:relative/position:absolute 且z-index不为auto
position值为fixed/sticky
z-index值不为auto的flex项目(父元素display:flex|inline-flex，子元素z-index不为auto，子元素构成层叠上下文元素).
元素的opacity值小于1.
元素的transform值不是none.
元素mix-blend-mode值不是normal.(混合模式：设置元素的含量应如何与元素的父的内容和元素的背景融为一体)
元素的filter值不是none.(滤镜：模糊与饱和度)
元素的isolation值是isolate.(隔离mix-blend-mode元素的混合。)
will-change指定的属性值为上面任意一个。(增强页面渲染性能)
元素的webkit-overflow-scrolling设为touch.(用来控制元素在移动设备上是否使用滚动回弹效果.)

层叠水平（层叠的等级）决定了同一个层叠上下文中元素在z轴上的显示顺序。
普通元素的层叠等级优先由其所在的层叠上下文决定。
层叠等级的比较只有在当前层叠上下文元素中才有意义。不同层叠上下文中比较层叠等级是没有意义的。

层叠顺序. 表示元素发生层叠时候有着特定的垂直显示顺序，注意，层叠顺序是规则。

[图片上传失败...(image-dcd07a-1548228089163)]

每一个层叠顺序规则适用于一个完整的层叠上下文元素。
左上角"层叠上下文background/border"指的是层叠上下文元素的背景和边框。
给元素只设置position:absolute/relative属性，该元素的z-index为auto仍是普通元素但是该元素在层叠顺序中和position:absolute/relative z-index:0; 处于同一等级
不支持z-index的层叠上下文元素相当与z-index:0等级

1、谁大谁上：当具有明显的层叠水平标示的时候，如识别的z-indx值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。
2、后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。

1、首先先看要比较的两个元素是否处于同一个层叠上下文如果是，谁的层叠等级大谁在上面（层叠等级的大小根据"层叠顺序"图比较）如果两个元素不在同一层叠上下文，往上找到他们所处的同一层叠上下文进行比较
2、当两个元素层叠等级相同、层叠顺序相同时，在DOM结构中后面的元素层叠等级在前面的元素