掌握 HTML 元素層級：深入 z-index 與 Stacking Context

在網頁排版與元素定位的過程中，position 和 z-index 是非常常見，但也容易令人混淆的 CSS 屬性。本文透過一段簡單的 HTML + CSS 範例，探討「子元素的位置」如何受到這些屬性的影響，並進一步解析 Stacking Context（堆疊上下文）的運作邏輯。

範例程式碼如下：

<div style = "position: relative; width: 300px; height: 300px; background: lightyellow; top: 150px; left: 250px; border: 2px solid; z-index: -2;">

    <div style = "position: absolute; z-index: 77; top: 5px; left: 90px; width: 60px; height: 70px; background: lightgreen;">lll

         <div style = "position: absolute; top: 8px; left: 20px; z-index: 89; width: 300px; height: 30px; background: violet;">AAAAAAAAAA</div>

   </div>

   <div style = "position: absolute; z-index: 88; left: 70px; top: 22px; width: 60px; height: 40px; background: lightblue;">BBBBB</div>

   <div style = "position: absolute; z-index: 99; left: 80px; top: 33px; width: 60px; height: 40px; background: lightgray;">CCCCC</div>

</div>

這段 HTML 中，有一個外層容器 <div>（黃色， position: relative），內部包含四個絕對定位（position: absolute）的區塊，其中三個是兄弟元素（綠、藍、灰），另一個則是巢狀在綠色區塊內部的紫色子元素。

初始 z-index 設定與顯示順序

黃色背景：z-index: -2

綠色背景：z-index: 77

藍色背景：z-index: 88

灰色背景：z-index: 99

紫色背景（子元素，巢狀於綠色內部）： z-index: 89

初始顯示順序（由底至頂）：

黃 (-2) → 綠 (77) → 紫 (89) → 藍 (88) → 灰 (99)

調整 z-index 後的觀察

調整一：

子元素（紫）z-index ：-1

顯示順序：（由底至頂）黃 (-2) → 綠 (77) → 紫 (-1) → 藍 (88) → 灰 (99) 

調整二：

父元素（綠）：z-index: auto

子元素（紫）：z-index: -1

顯示順序：（由底至頂）黃 (-2) → 紫 (-1) → 綠 (auto) → 藍 (88)→ 灰 (99)

觀察結果：當父元素的 z-index 設為 auto，便不會建立新的 stacking context，紫色子元素就與祖先元素共享上下文。

調整三：

父元素（綠）：z-index: auto

紫色子元素 z-index：89

顯示順序：（由底至頂）黃 (-2) → 綠 (auto) → 藍 (88) → 紫 (89) → 灰 (99)

更多組合實驗與結果

組合一：

父元素（綠）：z-index: 111

子元素（紫）：z-index: -1

顯示順序：（由底至頂）黃 (-2) → 藍 (88) → 灰 (99) → 綠 (111) → 紫 (-1)

組合二：

父元素（綠）：z-index: 111

子元素（紫）：z-index: 89

顯示順序：（由底至頂）黃 (-2) → 藍 (88) → 灰 (99) → 綠 (111) → 紫 (89)

組合三：

父元素（綠）：z-index: initial

子元素（紫）：z-index: 89

顯示順序：（由底至頂）黃 (-2) → 綠 (initial) → 藍 (88) → 紫 (89) → 灰 (99)

組合四：

父元素（綠）：z-index: initial

子元素（紫）：z-index: -1

顯示順序：（由底至頂）黃 (-2) → 紫 (-1) → 綠 (initial) → 藍 (88) → 灰 (99)

其他觀察組合

組合五：

黃：z-index: -2 

紫：z-index: -1

綠：z-index: auto

灰：z-index: auto

藍：z-index: 88

顯示順序：（由底至頂）黃 (-2) → 紫 (-1) → 綠 (auto) → 灰 (auto) → 藍 (88)

組合六：

黃：z-index: -2 

灰：z-index: initial

綠：z-index: 77

紫：z-index: -1

藍：z-index: 88

顯示順序：（由底至頂）黃 (-2) → 灰 (initial) → 綠 (77) → 紫 (-1) → 藍 (88)

組合七：

黃：z-index: 預設值（auto)

綠：z-index: -5

紫：z-index: -1

藍：z-index: -3

灰：z-index: -4

顯示順序：（由底至頂）綠 (-5) 內含紫 (-1) → 灰 (-4) → 藍 (-3) → 黃 (預設值：auto)

觀察結果：

1. 當黃色元素的 z-index 設為 auto 時，不建立新的 Stacking Context。綠、藍、灰直接參與外部上下文，並依負 z-index 大小排序：綠（-5）< 灰（-4）< 藍（-3）。
2. 綠色因設定了 z-index: -5，成功建立了一個「新的 Stacking Context」。這導致其內部的紫色（z-index: -1）雖然數值較大，但受限於父級綠色整體的負權重（-5），依然必須整體服從綠色，被壓在灰（-4）與藍（-3）的下方。
3. 在綠色自身的內部堆疊上下文中，紫色（-1）則正常顯示在綠色背景之上。

結論：如何掌控元素的層級？

從以上觀察可歸納出以下幾個實用原則：

z-index 只有在元素參與 stacking context 時才會生效。

子元素的 z-index 僅在其所屬的 stacking context 中發揮作用，無法跨越或影響其他上下文中的元素。

掌握 stacking context 與 z-index 的運作邏輯，是建立穩固前端版面結構的重要基礎。希望這篇實驗與解析，能幫助你在排版時做出更可預期的層級控制！