堆叠顺序

堆叠顺序.png

负z-index<普通元素<div块级元素<浮动元素<内联元素<定位元素<z-index
层级越高，对应的越上面，距离观察者越近。

堆叠上下文

堆叠上下文：stacking context，类似与作用域，由不同的CSS属性造成的一类具有相同特征的东西，并没有特定的概念。堆叠上下文影响的是元素 CSS 属性中的 z-index，父元素是否是堆叠上下文，对具有z-index属性的子元素的堆叠顺序有影响。
文档中的堆叠上下文由满足以下任意一个条件的元素形成：

1.根元素 (HTML),
2.z-index值不为"auto"的 绝对/相对定位，
3.一个z-index 值不为 "auto"的flex项目(flex item)，即：父元素 display: flex|inline-flex的元素
4.opacity属性值小于 1 的元素（参考 the specification for opacity），
5.transform 属性值不为"none"的元素，
6.mix-blend-mode 属性值不为"normal"的元素，
7.filter值不为“none”的元素，
8.perspective值不为“none”的元素，
9.isolation 属性被设置为 "isolate"的元素，
10.position: fixed
11.在will-change 中指定了任意 CSS 属性，即便你没有直接指定这些属性的值（参考 这篇文章）
12.-webkit-overflow-scrolling属性被设置 "touch"的元素