堆叠上下文

堆叠上下文可以理解为堆叠作用域，较为抽象

以下条件满足堆叠上下文

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

堆叠上下文.jpg

注意：
1、当z-index为负时：
父元素没有定位：z-index的元素在父元素下面
父元素有定位：z-index元素在父元素上面
2、两个div，都相对定位

<div class="div1">
    <div class="a"></div>
</div>
<div class="div2">
    <div class="b"></div>
</div>

• 没有z-index时，b>a(都一样时，后面的>前面的)
• a b相对定位，谁的z-index大谁在上面
• 当div2的z-index大于或等于div1的时候，不管a的z-index大b的多少，b都在a的上面（也就是说div2整体的堆叠顺序都比div1的大）
  ps：z-index只对定位元素，flex，opcity的元素起作用

参考：张鑫旭http://www.zhangxinxu.com/wordpress/2016/01/understand-css-stacking-context-order-z-index/
文档：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context