掌握 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)

觀察結果：當黃色元素的 z-index 被設為 auto 或移除時，它不再建立新的 Stacking Context。這使得其所有負 z-index 的定位子元素（包括綠、藍、灰），都排在黃（auto）的後面（參考顯示順序）。綠（-5）建立新的 Stacking Context 這使得其紫色子元素（-1）受其影響，排在藍（-3）、灰（-4）的後面（參考顯示順序）。

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

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

• z-index 只有在元素參與 stacking context 時才會生效。
• 子元素的 z-index 僅在其所屬的 stacking context 中發揮作用，無法跨越或影響其他上下文中的元素。
• 掌握 stacking context 與 z-index 的運作邏輯，是建立穩固前端版面結構的重要基礎。希望這篇實驗與解析，能幫助你在排版時做出更可預期的層級控制！