什么是层叠上下文？

层叠上下文是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.(用来控制元素在移动设备上是否使用滚动回弹效果.)

成为层叠上下文后具备哪些特性？

• 层叠上下文的层叠水平要比普通元素高；
• 层叠上下文可以阻断元素的混合模式；CSS3 层叠上下文与mix-blend-mode混合模式阻隔实例页面
• 层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的层叠上下文。
• 每个层叠上下文和兄弟元素独立，也就是当进行层叠变化或渲染的时候，只需要考虑后代元素。
• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。

什么是层叠水平？

层叠水平（层叠的等级）决定了同一个层叠上下文中元素在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结构中后面的元素层叠等级在前面的元素