堆叠上下文

堆叠上下文(stack content)

它是一块区域(跟bfc一样也是一块区域,可以影响在这快区域的元素),这块区域由某个元素创建，它规定了该区域中内容在z（平面垂直）轴上排列（覆盖）的先后顺序

创建堆叠上下文的元素:

1.html元素(根元素)
2.设置了z-index(非auto值)数值的定位元素
3.position 值为 fixed（固定定位）或 sticky（粘滞定位）的元素（沾滞定位适配所有移动设备上的浏览器，但老的桌面浏览器不支持）；
4.flex (flexbox) 容器的子元素，且 z-index 值不为 auto；
5.grid (grid) 容器的子元素，且 z-index 值不为 auto；
6.opacity 属性值小于 1 的元素（参见 the specification for opacity）；
7.mix-blend-mode 属性值不为 normal 的元素；
8.以下任意属性值不为 none 的元素：
transform
filter
perspective
clip-path
mask / mask-image / mask-border
9.isolation 属性值为 isolate 的元素；
10.-webkit-overflow-scrolling 属性值为 touch 的元素；
11.will-change 值设定了任一属性而该属性在 non-initial 值时会创建层叠上下文的元素（参考这篇文章）；
12.contain 属性值为 layout、paint 或包含它们其中之一的合成值（比如 contain: strict、contain: content）的元素。

同一个堆叠上下文里的元素在z轴上的排列

（创建堆叠上下文元素里的z轴排列规则）
从后到前的排列顺序1-7
7最高，1最低
(默认情况下子元素在父元素前面)
1.创建堆叠上下文的元素的背景和边框永远在最后(是指html),其它元素往上贴（创建堆叠上下文也按堆叠上下文先后排列）(父子关系)
2.次之,堆叠级别（z-index,stack level）为负数的堆叠上下文，如果两个元素在同一个堆叠上下文中并且在同一个父元素里同一级别里后面书写覆盖前面书写
3.常规流非定位的块盒
4.非定位的浮动盒子
5.常规流非定位的行盒
6.任何z-index是auto的定位子元素,以及z-index是0的堆叠上下文
7.堆叠级别为正值大于0的堆叠上下文

以上的东西都是在同一个堆叠上下文里的
每个堆叠上下文独立其它堆叠上下文，它们之间不能相互穿插可以把堆叠上下文看成是一个整体,每个堆叠上下文都有自己的排列方式，
堆叠上下文就是一个作用域，不在同一个作用域不能穿插
如果堆叠上下元素的堆叠级别比另一个堆叠上下文高那么堆叠上下文元素的子元素堆叠级别也比另一个堆叠上下文的子元素高
因为堆叠上下文是一个整体,子元素在这个堆叠上下文里面的可以把堆叠上下文看做是一个箱子或者是三明治，三明治里面的东西不会影响到外层