CSS z-index屬性

如何使用z-indexCSS中的屬性

在裡面定位柱我提到您可以使用z-index屬性來控制元素的Z軸定位。

當您有多個相互重疊的元素,並且需要確定哪個元素在用戶附近,並且哪些元素應該隱藏在用戶的後面時,此功能非常有用。

此屬性採用一個數字(不帶小數點),並使用該數字來計算Z軸上哪些元素顯示得更靠近用戶。

z-index值越高,元素越靠近用戶放置。

當確定哪個元素應該可見以及哪個元素應該位於其後時,瀏覽器將對z-index值進行計算。

默認值為auto,一個特殊的關鍵字。使用auto,則Z軸順序由頁面中HTML元素的位置確定-最後一個同級項首先出現,因為它的定義是最後一次。

默認情況下,元素具有static的價值position財產。在這種情況下,z-index屬性沒有任何區別-必須將其設置為absoluterelative或者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索引。

免費下載我的CSS手冊


更多CSS教程: