資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
服裝設計
法學使用 CSS 的 Z-Index 實現元素重疊
使用 CSS 的 z-index 實現元素重疊，我們將瞭解處理重疊的兩種不同方法：使用正值和負值的 z-index。CSS z-index 屬性允許使用者將元素堆疊在一起。
在本文中，我們有三個 div 盒子，每個盒子都有不同的顏色，我們的任務是使用 CSS 實現元素的 z-index 重疊。
使用 z-index 實現元素重疊的方法
我們將使用下面提到的兩種方法來使用 CSS 實現元素的 z-index 重疊
使用正值 z-index 實現重疊
要使用 CSS 的 z-index 處理重疊元素，我們將使用 CSS z-index 屬性的**正值**。
- 我們建立了三個不同顏色的 div 盒子，以使用正值 z-index 實現重疊。
- 我們對所有三個盒子都使用了一些常見的 CSS 屬性，例如 CSS background-color、height、width 和 position 屬性來設定它們的顏色和尺寸。
- 最後，我們使用了正的**z-index** 屬性值來指定 div 元素在堆疊中的順序。z-index 值較低的元素放在底部，例如：**綠色盒子**的值較低，因此放在堆疊的底部。
示例
這是一個使用 CSS 和**正值** z-index 處理重疊元素的示例，它實現了上述步驟。
<!DOCTYPE html>
<html>
<head>
<title>
Overlapping Elements with z-index using CSS
</title>
<style>
.green {
background-color: #04af2f;
height: 200px;
width: 200px;
position: absolute;
z-index: 1;
}
.black {
background-color: black;
height: 200px;
width: 200px;
position: absolute;
z-index: 2;
top: 110px;
left: 5%;
}
.color {
background-color: rgb(212, 182, 239);
height: 200px;
width: 200px;
position: absolute;
z-index: 3;
top: 130px;
left: 10%;
}
div:hover{
z-index: 4;
}
</style>
</head>
<body>
<h3>
Overlapping Elements with z-index using CSS
</h3>
<p>
In this example, we have used <strong>positive
z-index</strong> value to overlap elements.
</p>
<div class="green"></div>
<div class="black"></div>
<div class="color"></div>
</body>
</html>
使用負值 z-index 實現重疊
要使用 CSS 的 z-index 處理重疊元素，我們將使用 CSS z-index 屬性的負值。
- 我們建立了三個不同顏色的 div 盒子，以使用正值 z-index 實現重疊。
- 我們對所有三個盒子都使用了一些常見的 CSS 屬性，例如 CSS background-color、height、width 和 position 屬性來設定它們的顏色和尺寸。
- 最後，我們使用了負的**z-index** 屬性值來指定 div 元素在堆疊中的順序。z-index 值較高的元素放在頂部，例如：綠色盒子具有最高的值，因此放在堆疊的頂部。
示例
這是一個使用 CSS 和**負值** z-index 處理重疊元素的示例，它實現了上述步驟。
<!DOCTYPE html>
<html>
<head>
<title>
Overlapping Elements with z-index using CSS
</title>
<style>
.green {
background-color: #04af2f;
height: 200px;
width: 200px;
position: absolute;
z-index: -1;
}
.black {
background-color: black;
height: 200px;
width: 200px;
position: absolute;
z-index: -2;
top: 125px;
left: 5%;
}
.color {
background-color: rgb(212, 182, 239);
height: 200px;
width: 200px;
position: absolute;
z-index: -3;
top: 148px;
left: 8%;
}
</style>
</head>
<body>
<h3>
Overlapping Elements with z-index using CSS
</h3>
<p>
In this example, we have used <strong>negative
z-index</strong> value to overlap elements.
</p>
<div class="green"></div>
<div class="black"></div>
<div class="color"></div>
</body>
</html>
結論
在本文中，我們瞭解瞭如何使用 CSS 的**正值**和**負值** z-index 處理重疊元素。使用正值時，綠色盒子位於堆疊底部，值最低 (1)；而使用負值時，綠色盒子位於頂部，值最高 (-1)。
更新於：2024年9月24日
瀏覽量：11K+
廣告