為什麼 z-index 沒有效果

在做網頁改版的時候,遇到一個問題,一個元素的 z-index 數值不管我調多高,都無法蓋過 z-index 比它低的元素。
認真看了一下 MDN 的敘述,發現這是個菜雞錯誤 (RTFM),因此決定寫個文章記錄。

什麼是 z-index


在三維空間中,我們通常會用 x、y 與 z 來表示位置。

在 CSS 中也是如此,x 與 y 代表一個元素的長度與寬度,而 z 就代表深度,當有多個元素堆疊時,可以使用 z-index 來決定誰在堆疊的最上方。

/* 數值越高代表在堆疊的位置越上面 */
.a-element {
    z-index: 10;
}

為什麼 z-index 沒有效


z-index 會以父元素的 z-index 為主,所以在父元素底下的子元素,即使設定的 z-index 有很高的數值,也無法蓋過父元素外與父元素相同 z-index 數值的元素。

寫個範例來說明。

<div class="box box-red">
    <div class="box box-yellow"></div>
</div>
<div class="box box-blue"></div>

對應的 CSS 設定如下。

.box {
    height: 150px;
    width: 150px;
    position: absolute;
}

.box-red {
    background: red;
    z-index: 1;
}

.box-blue {
    background: blue;
    top: 60px;
    left: 60px;
    z-index: 2;
}

.box-yellow {
    background: yellow;
    left: 25px;
    top: 25px;
    z-index: 3;
}

顯示的畫面如下圖。

2021_09_04_15_49_12_613324f84746d.png

即使 box-yellow 有比較高的 z-index 數值 3,也無法蓋過 z-index 數值為 2 的 box-blue
這是因為 box-yellow 的父元素 box-red 的 z-index 數值只有 1。

但在相同的父元素下,子元素個別設定的 z-index 可以決定在父元素底下誰在前誰在後,我們新增一個 box-pink

<div class="box box-red">
    <div class="box box-yellow"></div>
    <div class="small-box box-pink"></div>
</div>
<div class="box box-blue"></div>

對應的 CSS 設定如下。

.box {
	height: 150px;
	width: 150px;
	position: absolute;
}

.small-box {
    height: 30px;
    width: 30px;
    position: absolute;
}

.box-red {
    background: red;
    z-index: 1;
}

.box-blue {
    background: blue;
    top: 60px;
    left: 60px;
    z-index: 2;
}

.box-yellow {
    background: yellow;
    left: 25px;
    top: 25px;
    z-index: 3;
}

.box-pink {
    background: pink;
    left: 35px;
    top: 35px;
    z-index: 4;
}

顯示的畫面如下圖。

2021_09_04_15_53_03_613325df79ff5.png

因為 box-blue 的 z-index 比 box-pink 的父元素 box-red 更高。
所以 z-index 為 4 的 box-pink 依舊無法蓋過 z-index 只有 2 的 box-blue

參考資料


CSS Z-Index Not Working? How to Fix It Using Stack Order

sharkHead
written by
sharkHead
後端工程師, PHP 基金會每月 10 刀贊助人
稍微擅長 PHP、Python 與 Google 搜尋,偶爾寫寫 TypeScript