z-index 的功能
z-index 的 z 代表的是 z 軸（立體空間），因此透過 CSS 中 z-index 的最大值或最小值屬性可以將重疊的元素依照需求進行層疊排序，z-index 數字越大其物件將越上層，上層的物件可以覆蓋下層的物件。
如何使用 z-index
z-index 只用於重疊的物件，如果物件沒有重疊則無法產生堆疊效果，重疊通常是透過定位元素如positon:absolute來指定物件位置使其重疊在一起，再透過 z-index 來做堆疊，詳細 CSS 與 HTML 請參考下方作法。
如果沒有指定 z-index，那麼預設會是 auto，重疊的物件將依照 HTML 撰寫的順序覆蓋，也就是寫在越下面的 HTML 元素將會顯示在越上層。
沒有指定z-index
See the Pen z-index default css by kumo (@kumo-tw) on CodePen.
上面的範例即是沒有指定 z-index，由於藍色區塊（div1）的 HTML 是寫在最上面因此出現在最下層，如果我們要將藍色區塊移到最上方，只要在 div1 的 css 中加上 z-index 屬性即可，數字這裡我們先設為 1 。
讓藍色區塊設為1
See the Pen Untitled by kumo (@kumo-tw) on CodePen.
這樣藍色區塊就到最上面了，如果又要讓綠色區塊（div3）比藍色區塊（div1）還要上面，就在 div3 的 css 中加上 z-index，並且數字需大於 div1。
讓綠色區塊設為2
See the Pen z-index:2 CSS by kumo (@kumo-tw) on CodePen.
了解規則以後就可以在會重疊的元素上自訂層級，通常導覽列（Navigation Section）選單、廣告、返回頂部按鈕、彈出式圖片等都會在最上面，背景圖片則在最下面。
最大值與最小值
我們已經知道 z-index 可以控制物件的堆疊順序，那麼最大值與最小值分別是多少呢？請參考：
| 最小值 | 最大值 |
|---|---|
| −2147483648 | 2147483647 |
超過最小值以最小值算，超過最大值以最大值算，例如「2147483647」與「2147483648」會被視為一樣大，這時候順序會由 HTML 的順序或父層順序等決定。
通常為了保留空間不會直接設最大值，避免未來又有需要更上面的物件卻沒有值可以堆上去，當然有時候會被第三方直接設最大值（比如說廣告容易被設為最大值），這時候就只能設為跟它一樣大，然後把 HTML 寫在最下面了。
z-index 語法
除了數字之外也可以用其他語法，分別如下：
| 語法 | 說明 |
|---|---|
| z-index: auto; | 預設 |
| z-index: initial; | 保持初始值 |
| z-index: inherit; | 繼承父層 |
z-index 不起作用之解決辦法
如果 z-index 沒有起到作用，表示可能沒有使用定位元素。z-index 只用於定位元素，如下：
position: absolute;
position: relative;
position: fixed;
position: sticky;
以及 flex 物件：display:flex
如果有使用定位元素卻還是沒有起到作用，通常是因為父層影響。
<div class="gold">
<div class="blue"></div>
</div>
<div class="pink">
<div class="green"></div>
</div>
綠色區塊已經設定為 100 卻還是比設 0 的藍色還要下面，這是因為藍色的父層是金色，金色比粉紅色大，因此粉紅色中的綠色即使設1千萬都會比藍色下面。
解決辦法是從父層去解決，把粉紅色改大於金色，或把金色改小於粉紅色，再不然就是不要放在粉紅色父層裡，改放到金色父層等，方法百百種，只要釐清原因再去對症下藥即可。