2022-11-01 z-index 层叠上下文

z-index：改变元素的层级，只在定位元素position上有效（非static），当元素与元素之间的层级进行比较时，这两个元素必须在同一个层叠上下文中，不然没有可比性。

比较两个元素的层级：
1：当两个元素在同一个层叠上下文中，谁的z-index大谁就在上面
2：当两个元素不在同一个层叠上下文中，先找出他们的父级（向上追溯）所在的同一个层叠上下文，然后比较这两个父级的z-index即可。
层叠上下文：

假定用户正面向（浏览器）视窗或网页， HTML 元素沿着其相对于用户的一条虚构的 z 轴排开，层叠上下文就是对这些 HTML 元素的一个三维构想。

生成层叠上下文的方式：
1：HTML中的根元素
2：普通元素设置position属性（非static）并且设置 z-index(非auto)属性
3：css的新属性，具体如下：

if (
        /[0-9]+/.test(zIndex)
        || opacity < 1
        || (transform && transform !== 'none')
        || (transformStyle && transformStyle !== 'flat')
        || (transformBox && transformBox !== 'border-box')
        || (filter && filter !== 'none')
        || (perspective && perspective !== 'none')
      ) {
     // 以上属性如果出现，就会生成层叠上下文
      }

代码来自于 web端新手指引库
注意：当z-index为auto时，当前元素不会生成层叠上下文，上面指引库就是使用这个表原理实现的