條件
文檔中的層疊上下文由滿足以下任意一個條件的元素形成：
- 根元素（HTML）
- z-index 不為 auto 的 absolute/relative
- 一個 z-index 值不為 auto 的 flex 項目偶惠，即父元素 display: flex/inline-flex
- opacity 屬性值小于 1 的元素
- transform 屬性不為 none 的元素
- mix-blend-mode 屬性值不為 normal 的元素
- filter 不為 none 的元素
- perspective 值不為 none 的元素
- isolation 屬性被設(shè)置為 isolate 的元素
- position: fixed
- 在 will-change 中指定了任意 CSS 屬性放祟，即使沒有直接指定這些屬性的值
- -webkit-overflow-scrolling 屬性被設(shè)置為 touch 的元素
堆疊層級：
負z-index(父元素沒有position: relative/absolute) < position: static（background-color < border < 負z-index(父元素position: relative/absolute) < div/塊級元素 < 浮動元素 < 浮動元素內(nèi)的文字/內(nèi)聯(lián)元素 < 浮動元素外面的文字/內(nèi)聯(lián)元素） < position: relative/absolute < 正z-index
- 相同的屬性按先后順序排列
- 具有相同
position屬性的 +z-index只能覆蓋相同position屬性（relative === absolute）的元素
作用 + 影響
堆疊上下文主要是影響 z-index
z-index: 2 永遠在 z-index: 0 的上方么？
堆疊上下文影響 z-index 01
堆疊上下文影響 z-index 02
堆疊上下文影響 z-index 03
堆疊上下文影響 z-index 04
堆疊上下文影響 z-index 05
具體使用示例
最佳實踐 & 套路
z-index 需要配合 position: relative | absolute 使用
