資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究auto、0 和無 z-index 之間的區別
網頁元素的位置對於開發者來說是一個至關重要的屬性。如果元素位置安排不當，可能會導致顯示混亂或無序。因此，開發者需要謹慎地設定每個HTML元素的位置。
有時，即使元素分別指定了位置，也可能發生重疊的情況。這些重疊的元素可能會堆疊在一起，隱藏其他元素。為了解決這個問題，CSS 提供了 z-index 屬性用於網頁設計。在本文中，我們將學習 CSS 的 z-index 屬性。我們還將討論 z-index 的不同值以及它們之間的區別。
什麼是 z-index 屬性？
CSS 的 z-index 屬性使開發者能夠指定在 z 軸上（即螢幕內或螢幕外）重疊元素的順序。但是，z-index 屬性僅適用於 position 值不是 static 的元素。
HTML 元素的堆疊級別由 z-index 屬性決定。“堆疊級別”指的是元素在 Z 軸上的位置（與 X 軸或 Y 軸相對）。值越高，元素在堆疊順序中的位置越靠上。這種堆疊順序垂直於視口或顯示。
HTML頁面中Z軸上元件的自然堆疊順序受多種因素影響。這些因素按顯示順序排列：具有負堆疊上下文的元素、非定位、非浮動、塊級元素、非定位、浮動元素、內聯元素和定位元素。
語法
element{
z-index: values;
}
此屬性的值如下：
auto - 重疊順序與父元素的值相同。這是預設值。
數字 - 重疊順序指定為數字，例如 1、2、3 等。
initial - 將順序設定為預設值。
inherit - 重疊順序由父元素繼承。
示例
<!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 值
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 屬性的零值是元素順序的數值。將 z-index 值指定為 0，會建立一個堆疊上下文。例如，如果我們有兩個元素 element 1 和 element 2，它們的 z-index 分別為 1 和 0。那麼，element 1 將堆疊在 element 2 上方。而如果它們的 z-index 分別為 -1 和 0，則 element 1 將堆疊在 element 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 屬性無值
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 如何影響網頁上的堆疊上下文進行了全面描述，充分理解後，它將成為一個強大的 CSS 屬性。現在，新手開發者應該能夠有效地使用此屬性並避免一些常見的錯誤。高階開發者也應該更清楚地瞭解如何正確應用 z-index 來解決各種佈局問題並提供各種創意 CSS 設計選項。
190 次瀏覽
