網頁中元素的位置是開發人員指派的一個重要屬性。如果你的元素放置不正確，那麼它可能會顯示為荒謬或無組織的。因此，開發人員明智地分配每個 HTML 元素的位置非常重要。
有時，儘管分配了各自的位置，但元素可能會重疊。這些重疊的元素可以彼此堆疊並且可以隱藏其他元素。為了解決這個問題，CSS 為網頁設計提供了 z-index 屬性。在這篇文章中，我們將學習 CSS 的 z-index 屬性。我們還將討論 z-index 的不同值以及它們之間的差異。
CSS 的 z-index 屬性使開發人員能夠指定在 z 軸上（即螢幕內或螢幕外）重疊的元素的順序。但是，z-index 屬性僅適用於指定了 static 以外的位置值的元素。
HTML 元素的堆疊層級由 z-index 屬性決定。元素在 Z 軸上的位置稱為「堆疊層級」（與 X 軸或 Y 軸相對）。如果該值較高，則該元素將放置在靠近堆疊順序頂部的位置。這種堆疊排列垂直於視口或顯示器。
HTML 頁面中 Z 軸上組件的自然堆疊順序受到多種因素的影響。這些是具有負堆疊上下文的元素、非定位、非浮動、區塊元素、非定位、浮動元素、內聯元素和定位元素，全部按顯示順序排列。
element{
z-index: values;
}
以下是該屬性的值 -
自動 - 重疊順序與父級的值相同。這是預設值。
數字- 重疊的順序指定為數字，如 1、2、3 等。
初始- 順序設定為預設值。
繼承- 重疊順序由父元素繼承。
<!DOCTYPE html>
<html>
<head>
<title>z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 100px;
left: 300px;
z-index: 2;
width: 200px;
}
</style>
</head>
<body>
<center>
<h2> z-index property </h2>
<div class= "demo1"> This is an example. </div>
<div class= "demo2"> This is an example. </div>
</center>
</body>
</html>
z-index屬性的auto值是與父元素相同的元素順序。
<!DOCTYPE html>
<html>
<head>
<title>Auto value of z-index property</title>
<style>
.demo1{
font-family: verdana,'cursive';
background-color: #FFFF00;
position: absolute;
top: 120px;
z-index: auto;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 200px;
z-index: auto;
}
</style>
</head>
<body>
<center>
<h2>z-index property</h2>
<p class= "demo1"> This is an example. </p>
<p class= "demo2"> This is an example. </p>
</center>
</body>
</html>
z-index 屬性的零值是元素順序的數值。將 z-index 值指定為 0，建立堆疊內容。例如，如果我們有兩個元素元素 1 和元素 2，則它們的 z 索引分別為 1 和 0。因此，元素 1 將堆疊在元素 2 之上。而如果它們的 z 索引分別為 -1 和 0，則元素 1 將堆疊在元素 2 的下方。請考慮以下範例。
<!DOCTYPE html>
<html>
<head>
<title>Zero value of z-index property</title>
<style>
.demo1{
font-family: cursive, Cochin, Georgia;
background-color: #FF0000;
position: absolute;
top: 120px;
z-index: 0;
}
.demo2{
font-family: cursive, Cochin, Georgia;
background-color: red;
position: absolute;
top: 100px;
left: 300px;
z-index: 0;
width: 200px;
}
</style>
</head>
<body>
<h1>Tutorialspoint</h1>
<h2>z-index property</h2>
<p class= "demo1">This is an example.</p>
<p class= "demo2">This is an example.</p>
</body>
</html>
z-index 屬性的值通常不會與 auto 值相同。
<!DOCTYPE html>
<html>
<head>
<title>No value for z-index property</title>
<style>
.demo{
font-family: cursive, Cochin, Georgia;
background-color: #FFFF00;
position: absolute;
top: 120px;
}
</style>
</head>
<body>
<h2>z-index property</h2>
<p class= "demo">This is an example.</p>
</body>
</html>
一個具有挑戰性的主題是在 CSS 中堆疊上下文。在本文中，我們全面描述了網頁上的堆疊上下文如何受到 z-index 的影響，當充分理解 z-index 時，它會轉化為強大的 CSS 屬性。既然熟悉了這個特性，新開發人員應該能夠有效地使用它並避免一些可能發生的常見問題。資深開發人員也應該更了解 z-index 的適當應用如何解決各種佈局挑戰並提供各種創意的 CSS 設計選項。
以上是auto、0 與無 z-index 之間的區別的詳細內容。更多資訊請關注PHP中文網其他相關文章！
