CSS 中的 z-index 屬性可以讓我們改變元素的層疊順序，即使得某些元素可以被覆蓋在其他元素之上。

/* 假設我們有以下 HTML： */
<div class="container">
<div class="box box1">Box One</div>
<div class="box box2">Box Two</div>
<div class="box box3">Box Three</div>
</div>

假設三個元素都有相同的位置和大小：

.container {
position: relative;
}
.box {
position: absolute;
top: 50px;
left: 50px;
width: 200px;
height: 100px;
}

默認情況下，它們的層疊順序為后來居上。這意味著 Box Three 會被 Box Two 和 Box One 覆蓋。

如果我們想要改變它們的層疊順序，可以使用 z-index。z-index 屬性的值可以是任何數字，但只有比較大的值才會覆蓋比較小的值。

/* 為了讓 Box Three 覆蓋 Box Two 和 Box One，我們可以這樣寫： */
.box1 {
z-index: 1;
}
.box2 {
z-index: 2;
}
.box3 {
z-index: 3;
}

這樣，我們就可以控制元素的層疊順序，讓某些元素處于更高的層級。