详解CSS层叠上下文（解析z-index不生效的原因）

1. 为什么会有层叠上下文

在CSS2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发现某个元素可能覆盖了另一个元素或者被另一个元素覆盖。

2. 如何产生层叠上下文
   一般来讲有3种方法：

（1） html中的根元素本身就是层叠上下文，成为根层叠上下文
（2）position属性为非static值并设置z-index属性为具体数值
（3）一些CSS3属性也能产生层叠上下文

• 一个 flex 元素(flex item)，且 z-index 值不为 “auto”，也就是父元素 display:flex|inline-flex 元素
• opacity 属性值小于 1
• 元素的transform 属性值不为 “none”
• 元素的mix-blend-mode 属性值不为 “normal”
• 元素的 isolation 属性被设置为 “isolate”
• 在 mobileWebKit 和 Chrome 22+ 内核的浏览器中，position: fixed 总是创建一个新的层叠上下文, 即使 z-index的值是 “auto”
• 在 will-change 中指定了任意 CSS 属性，即便你没有定义该元素的这些属性
• 元素的 -webkit-overflow-scrolling 属性被设置 “touch”
  

3. 不生效的主要原因
   单独使用时不生效，一定要配合定位属性一起，即只对指定了position属性的元素生效——只要不是默认值static，其他的absolute、relative、fixed都可以使z-index生效。(在CSS3之后，弹性元素的子元素也可以生效)
   参考文章：
   为什么我写的z-index不生效？
   z-index不生效？让我们来掀开它的面具