堆疊上下文示例 3
描述
此示例展示了在多層 HTML 層次結構中混合多個定位元素，並且使用類選擇器分配 z-index 值時出現的問題。
此示例有一個三級分層選單，由幾個定位的 div 元素組成。當用戶懸停或點選其父元素時，會顯示二級和三級 div 元素。通常，這種選單是客戶端或伺服器端指令碼生成的，因此樣式規則使用類選擇器而不是 ID 選擇器進行分配。
如果三級選單部分重疊，那麼管理堆疊可能會成為一個問題。
一級選單是相對定位的，建立了一個堆疊上下文。
二級選單絕對定位在其父元素內部。為了將其置於所有一級選單之上，使用了 z-index 屬性。問題是，對於每個二級選單，都會建立一個堆疊上下文，並且每個三級選單都屬於其父級的上下文。
因此，三級選單將堆疊在以下二級選單之下，因為所有二級選單共享相同的 z-index 值，並且應用預設的堆疊規則。
為了更好地理解這種情況，下面是堆疊上下文層次結構（三個點“...”表示前一行的多次重複）
- 根堆疊上下文
-
級別 #1
-
級別 #2 (
z-index: 1)- 級別 #3
- …
- 級別 #3
-
級別 #2 (
z-index: 1) -
…
-
級別 #2 (
z-index: 1)
-
-
級別 #1
-
…
-
級別 #1
-
可以透過刪除不同級別選單之間的重疊，或者透過使用透過 ID 選擇器而不是類選擇器分配的單獨（和不同）z-index 值，或者透過扁平化 HTML 層次結構來避免此問題。
注意：在原始碼中，您將看到二級和三級選單由包含在絕對定位容器中的多個 div 元素組成。這有助於將它們全部一次性分組和定位。
示例
HTML
html
<div class="lev1">
LEVEL #1
<div id="container1">
<div class="lev2">
LEVEL #2 <br />z-index: 1;
<div id="container2">
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
<div class="lev3">LEVEL #3</div>
</div>
</div>
<div class="lev2">LEVEL #2 <br />z-index: 1;</div>
<div class="lev2">LEVEL #2 <br />z-index: 1;</div>
<div class="lev2">LEVEL #2 <br />z-index: 1;</div>
</div>
</div>
<div class="lev1">LEVEL #1</div>
<div class="lev1">LEVEL #1</div>
<div class="lev1">LEVEL #1</div>
CSS
css
div {
opacity: 0.9;
}
.lev1 {
width: 250px;
height: 70px;
position: relative;
}
#container1 {
z-index: 1;
position: absolute;
top: 30px;
left: 75px;
}
.lev2 {
width: 200px;
height: 60px;
position: relative;
}
#container2 {
z-index: 1;
position: absolute;
top: 20px;
left: 110px;
}
.lev3 {
z-index: 10;
width: 100px;
position: relative;
}
結果
另見
- 不使用
z-index屬性進行堆疊：當不使用z-index時應用的堆疊規則。 - 浮動元素的堆疊：浮動元素如何處理堆疊。
- 使用 z-index：如何使用
z-index更改預設堆疊。 - 堆疊上下文：關於堆疊上下文的注意事項。
- 堆疊上下文示例 1：2 級 HTML 層次結構，
z-index在最後一級 - 堆疊上下文示例 2：2 級 HTML 層次結構，
z-index在所有級別