CSS z-index 屬性

如何在 CSS 中使用 z-index 屬性

在定位文章中，我提到您可以使用 z-index 屬性來控制元素在 Z 軸上的定位。

當您有多個元素互相重疊時，且需要決定哪個元素更為可見（靠近使用者），哪個元素應該被隱藏在其後時，這個屬性非常有用。

此屬性接受一個不包含小數的數字，並使用該數字來計算哪些元素在 Z 軸上靠近使用者。

z-index 值越高，元素靠近使用者的位置就越前。

當決定哪個元素應該可見並應該將哪個元素放在其後時，瀏覽器會根據 z-index 值進行計算。

auto 是默認值，一個特殊的關鍵字。使用 auto 時，Z 軸的順序由 HTML 元素在頁面中的位置決定 - 最後一個兄弟元素首先出現，因為它是最後定義的。

默認情況下，元素的 position 屬性的值為 static。在這種情況下，z-index 屬性不起任何作用 - 它必須設置為 absolute、relative 或 fixed 方可生效。

例如：

.my-first-div {
 position: absolute;
 top: 0;
 left: 0;
 width: 600px;
 height: 600px;
 z-index: 10;
}

.my-second-div {
 position: absolute;
 top: 0;
 left: 0;
 width: 500px;
 height: 500px;
 z-index: 20;
}

具有 .my-second-div 類別的元素將被顯示在前面，而 .my-first-div 元素將在其後。

在這個例子中，我們使用了 10 和 20，但您可以使用任意數字，包括負數。常見的做法是選擇非連續的數字，這樣您可以將元素定位在中間。如果使用連續的數字，您需要重新計算涉及定位的每個元素的 z-index。