堆疊上下文示例 3

描述

最後一個示例展示了在多級 HTML 層次結構中混合多個定位元素以及使用類選擇器分配 `z-index` 值時出現的問題。

以三級層次選單為例，它由多個定位的 `div` 元素組成。當用戶將滑鼠懸停在二級和三級 `div` 元素的父元素上或單擊它們時，它們會顯示出來。通常，這種型別的選單是透過客戶端或伺服器端指令碼生成的，因此樣式規則是使用類選擇器而不是 ID 選擇器分配的。

如果三個選單級別部分重疊，則管理堆疊可能會成為問題。

一級菜單只是相對定位的，因此不會建立堆疊上下文。

二級選單在父元素內絕對定位。為了將它放在所有一級選單之上，使用了 `z-index` 屬性。問題在於，每個二級選單都會建立一個堆疊上下文，而每個三級選單都屬於其父元素的上下文。

因此，三級選單將被以下二級選單堆疊，因為所有二級選單都共享相同的 z-index 值，並且應用了預設堆疊規則。

為了更好地理解這種情況，以下是如何堆疊上下文的層次結構（三個點 "..." 表示對上一行的多次重複）

  • 根堆疊上下文
    • 一級
      • 二級（`z-index`: 1）
        • 三級
        • …
        • 三級
      • 二級（`z-index`: 1）
      • …
      • 二級（`z-index`: 1）
    • 一級
    • …
    • 一級

可以透過消除不同級別選單之間的重疊來避免此問題，或者透過使用透過 ID 選擇器而不是類選擇器分配的單獨（且不同的）z-index 值，或者透過扁平化 HTML 層次結構來避免此問題。

注意：在原始碼中，您將看到二級和三級選單由包含在一個絕對定位的容器中的多個 `div` 元素組成。這有助於一次性對所有這些元素進行分組和定位。

示例

HTML

html
<div class="lev1">
  <span class="bold">LEVEL #1</span>

  <div id="container1">
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;

      <div id="container2">
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
        <div class="lev3"><span class="bold">LEVEL #3</span></div>
      </div>
    </div>

    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
    <div class="lev2">
      <br /><span class="bold">LEVEL #2</span> <br />z-index: 1;
    </div>
  </div>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

<div class="lev1">
  <span class="bold">LEVEL #1</span>
</div>

CSS

css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

div.lev1 {
  width: 250px;
  height: 70px;
  position: relative;
  border: 2px outset #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#container1 {
  z-index: 1;
  position: absolute;
  top: 30px;
  left: 75px;
}

div.lev2 {
  opacity: 0.9;
  width: 200px;
  height: 60px;
  position: relative;
  border: 2px outset #990000;
  background-color: #ffdddd;
  padding-left: 5px;
}

#container2 {
  z-index: 1;
  position: absolute;
  top: 20px;
  left: 110px;
}

div.lev3 {
  z-index: 10;
  width: 100px;
  position: relative;
  border: 2px outset #000099;
  background-color: #ddddff;
  padding-left: 5px;
}

結果

另請參見

注意：示例影像看起來不正確 - 二級選單 2 重疊了三級選單 - 因為二級選單具有不透明度，這會建立一個新的堆疊上下文。基本上，這個示例頁面完全不正確，而且有誤導性。