前端三十｜04. [CSS] z-index 與 Stacking Context 的關係是什麼？

不知道大家有沒有這樣的經驗：在排版時無論 z-index 怎麼調整，元素仍然被其他東西蓋住，怎麼調都調不好；今天我們將會深入理解這背後的原因，一起來聊聊 z-index 及與它相關的 堆疊環境（Stacking Context）。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

z-index

相信這個 CSS 屬性大家應該都不陌生，是用來指定元素在 z 軸的「高度」（越大越靠近使用者）；在 CSS2.1 的規格 中指明：

For a positioned box, the ‘z-index’ property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a stacking context.

這邊的 positioned box 指的是 position 屬性不為預設值（static）的元素（box 指盒模型）；所以 z-index 即為指定元素在 堆疊環境 中的 堆疊層級，且它只在 positioned box 上生效。

眼尖的同學應該已經注意到了，又出現了 昨天文章 就已經提到過的 Stacking Context，那麼它究竟是什麼呢？

堆疊環境 Stacking Context

在網頁排版時，預設的元素排列會是由上到下、由左到右的依序排列；開發者如果想要調整或固定特定元素的位置，會透過設定 position 為 relative、absolute、fixed，讓指定的元素可以從原本的排列位置移動，甚至離開（Out of Flow）。而這時，也就產生了一個新的 CSS 堆疊環境，從此這個元素及它的子元素，就自成一國，他們的排列也就與其他的堆疊環境無關了。

功能

那這些自成一國的堆疊環境，對開發者來說有什麼影響呢？

很簡單！堆疊環境內的元素、屬性變動，是不會觸發其他堆疊環境的回流（Reflow）的喔～

昨天討論的瀏覽器的渲染步驟，其實還有最後一步：一個 Render Tree 經過計算後會轉換成許多堆疊環境，也可以理解成…