堆叠上下文示例 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 重叠了三级菜单 - 因为二级菜单具有不透明度，这会创建一个新的堆叠上下文。基本上，这个示例页面完全不正确，而且有误导性。