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

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

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

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

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

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

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

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

例如:

.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