在 CSS 之中，每個 box 在位置上會有三個數值來表示，分別為水平、垂直以及遠近（z 軸），當 box 重疊的時候，z 軸的設定就變得很重要了。

透過 z-index 我們可以在元素相互重疊的時候，無視元素在 HTML 結構上的先後順序，用 z-index 的大小來輸贏，數值越大的會在越上層，小的則是被壓在下方。

根據 csswg 的文件表示，在已定位（position 設定為預設值 static 以外的元素）的 box 中，我們可以給 z-index 設定：

1. 目前這個 box 所在的堆疊環境中的堆疊層級
2. 是否要在目前這個 box 建立 stacking context

• 整數（integer）：可以是負數，這個數字表示了目前所設定這個 box 在當前堆疊環境（stacking context）中的堆疊層級（stack level）。
• auto： 在當前的 box 中的堆疊層級為 0，而設定 auto 的時候，這個 box 並不會建立任何新的堆疊環境。

我們在渲染的時候會替每一個 box 建立 stacking context，每一個堆疊環境都不會與其他的堆結環境相互干擾。

而其中，我們如果對於堆疊環境內的元素進行變動，這個行為是不會觸發 Reflow 的。

當我們要透過 z-index 來操作兩個元素間的先後堆疊時，要先確認這兩個元素是在同樣的堆疊環境中，我們所設定的 z-index 才能夠正常作用。

參考

04. [CSS] z-index 與 Stacking Context 的關係是什麼？
重新認識 CSS - z-index & stacking context
MDN - z-index
csswg - z-index