在做網頁改版的時候，遇到一個問題，一個元素的 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;
}顯示的畫面如下圖。
即使 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;
}顯示的畫面如下圖。
因為 box-blue 的 z-index 比 box-pink 的父元素 box-red 更高。
所以 z-index 為 4 的 box-pink 依舊無法蓋過 z-index 只有 2 的 box-blue。
