z-index 屬性在前端開發中控制元素的堆疊順序。它決定了哪些元素會覆蓋在其他元素之上。理解 z-index 的關鍵在於理解 堆疊上下文 (stacking context) 的概念。
1. 堆疊上下文:
- 不是所有元素都直接比較
z-index值。只有在同一個堆疊上下文內的元素才會根據z-index值決定堆疊順序。 - 建立堆疊上下文的常見方式：
- 根元素 (
<html>) position值為absolute、relative或fixed的元素，並且z-index值不為autoposition值為sticky的元素（無論z-index值）opacity值小於 1 的元素transform、filter、perspective、clip-path、mask / mask-image / mask-composite值不為none的元素isolation: isolate的元素will-change指定的屬性值為上面任意一個建立堆疊上下文的屬性contain: layout、contain: paint或contain: strict的元素mix-blend-mode值不為normal的元素filter: blur()backdrop-filter值不為none的元素
- 根元素 (
2. z-index 值:
auto：預設值，不建立新的堆疊上下文。元素的堆疊順序由其在 HTML 文件中的位置和父元素的堆疊順序決定。- 整數（正數、負數或 0）：建立新的堆疊上下文。值越大，堆疊順序越高，越靠近使用者。
3. 堆疊順序的確定:
瀏覽器根據以下規則確定元素的堆疊順序：
- 背景和邊框: 元素的背景和邊框首先被繪製。
- 負 z-index: 堆疊上下文內，
z-index為負值的子元素。 - 塊級框: 文件流中，沒有定位的塊級元素，以及
z-index為auto的定位元素。 - 浮動框: 浮動元素。
- 內聯框: 內聯元素，例如文字和圖片。
- z-index:0: 堆疊上下文內，
z-index為 0 的子元素。 - 正 z-index: 堆疊上下文內，
z-index為正值的子元素，值越大，堆疊順序越高。
4. 常見問題和解決方法:
- z-index 失效: 通常是因為元素沒有在正確的堆疊上下文中。檢查父元素是否建立了堆疊上下文，以及
z-index值是否設定正確。 - 堆疊上下文巢狀: 理解堆疊上下文的巢狀關係對於解決複雜的堆疊問題至關重要。子元素的
z-index值只在它的父級堆疊上下文中有效。 - 儘量避免使用過大的 z-index 值: 過大的
z-index值會增加維護的難度，並可能導致效能問題。
示例:
假設有三個 div 元素：A、B 和 C。A 是 B 的父元素，B 是 C 的父元素。
- 如果 A 的
z-index為 1，B 的z-index為 2，C 的z-index為 3，那麼 B 會覆蓋 A，C 會覆蓋 B。 - 如果 A 的
z-index為 1，B 沒有設定z-index，C 的z-index為 3，那麼 A 會覆蓋 C。因為 C 的z-index只在 B 的堆疊上下文中有效，而 B 沒有建立新的堆疊上下文，所以 C 的z-index相對於 A 無效。
總結:
z-index 看似簡單，但實際應用中需要深入理解堆疊上下文的概念。 透過仔細分析元素的層級關係和堆疊上下文，才能有效地控制元素的堆疊順序。
希望以上解釋能夠幫助你理解 z-index。