如何在 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
。