CSS 最佳實踐 + 套路（三） -- 堆疊上下文

條件

文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

• 根元素（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 屬性被設置爲 isolate 的元素
• position: fixed
• 在 will-change 中指定了任意 CSS 屬性，即使沒有直接指定這些屬性的值
• -webkit-overflow-scrolling 屬性被設置爲 touch 的元素

#堆疊層級：

1	負z-index(父元素沒有position: relative/absolute) < position: static（background-color < border < 負z-index(父元素position: relative/absolute) < div/塊級元素 < 浮動元素 < 浮動元素內的文字/內聯元素 < 浮動元素外面的文字/內聯元素） < position: relative/absolute < 正z-index

• 相同的屬性按先後順序排列
• 具有相同 position 屬性的 + z-index 只能覆蓋相同 position 屬性（relative === absolute）的元素

作用 + 影響

堆疊上下文主要是影響 z-index
z-index: 2 永遠在 z-index: 0 的上方麼？

最佳實踐 & 套路

z-index 需要配合 position: relative | absolute 使用

©

版權聲明：本文爲博主原創文章，未經博主允許不得轉載。