z-index仅在定位元素上有效，定义了postion，且值不为static，默认值auto。auto表示元素在当前层叠上下文中的层叠级别是0，

元素在Z轴上的堆叠顺序，由元素的层叠上下文、层叠等级共同决定。

层叠等级

• 同一个层叠上下文中，该层叠上下文中的层叠上下文元素在Z轴上的上下顺序。
• 普通元素中，普通元素在Z轴上的上下顺序。

产生“层叠上下文”

1. HTML中的根元素本身具有层叠上下文，“根层叠上下文”。
2. 普通元素设置position属性值为非static，设置z-index为集体数值，产生层叠上下文。
3. CSS3中的新属性也可产生层叠上下文。

不考虑CSS3时，层叠顺序规则：

1. 层叠上下文元素的背景和边框 background/border
2. z-index < 0
3. block 块级水平盒子
4. float 浮动盒子
5. inline/inline-block 水平盒子
6. z-index:auto / z-index: 0，不依赖z-index的层叠上下文
7. z-index > 0

结论：

1. 比较两个元素是否处于一个层叠上下文中。是：层叠等级大的在上。否：比较它们所处的层叠上下文的层叠等级。
2. 两个元素层叠等级相同、层叠顺序相同，在DOM结构中后面的元素覆盖前面的元素。

CSS3产生层叠上下文

1. 父元素的display属性值为flex|inline-flex，子元素z-index值不为auto，子元素为层叠上下级元素。
2. 元素的opacity值不是1。
3. 元素的transform属性值不是none
4. 元素的mix-blend-mode属性值不是normal，元素内容和元素的背景以及下面的元素发生混合
5. 元素的filter属性值不是none
6. 元素的isolation属性值是isolate，该属于用于隔离mix-blend-mode元素的混合。
7. will-change指定的属性值为上面任意一个，该属性用于提高页面滚动、动画等渲染性能
8. 元素的-webkit-overflow-scrolling属性值设置为touch