CSS z-index屬性

如何使用`z-index`CSS中的屬性

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

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

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

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

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

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

默認情況下，元素具有static的價值position財產。在這種情況下，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索引。

免費下載我的CSS手冊

CSS z-index屬性

如何使用z-indexCSS中的屬性

更多CSS教程：

如何使用`z-index`CSS中的屬性