堆疊上下文示例 1

描述

讓我們從一個基本示例開始。在根堆疊上下文中，有兩個相對定位的<div>元素（DIV #1 和 DIV #3），它們沒有z-index屬性。在 DIV #1 中，有一個絕對定位的 DIV #2，而在 DIV #3 中，有一個絕對定位的 DIV #4，它們都沒有z-index屬性。

唯一的堆疊上下文是根上下文。沒有z-index值時，元素按出現順序進行堆疊。

Stacking context example 1

如果 DIV #2 被分配一個正（非零且非自動）z-index 值，則它將渲染在所有其他 DIV 之上。

Stacking context example 1

然後，如果 DIV #4 也被分配了一個大於 DIV #2 的 z-index 值，它將渲染在所有其他 DIV 之上，包括 DIV #2。

Stacking context example 1

在最後一個例子中，你可以看到 DIV #2 和 DIV #4 不是兄弟節點，因為它們屬於 HTML 元素層次結構中的不同父節點。即使這樣，仍然可以透過z-index控制 DIV #4 相對於 DIV #2 的堆疊。由於 DIV #1 和 DIV #3 沒有分配任何 z-index 值，所以它們不會建立堆疊上下文。這意味著它們的所有內容，包括 DIV #2 和 DIV #4，都屬於同一個根堆疊上下文。

就堆疊上下文而言，DIV #1 和 DIV #3 被歸併到根元素，最終的層次結構如下：

  • 根堆疊上下文
    • DIV #2 (z-index: 1)
    • DIV #4 (z-index: 2)

注意：DIV #1 和 DIV #3 不是半透明的。重要的是要記住，為定位元素分配小於 1 的不透明度會隱式建立堆疊上下文，就像新增z-index值一樣。這個例子展示了當父元素沒有建立堆疊上下文時會發生什麼。

示例

HTML

html
<div id="div1">
  <br /><span class="bold">DIV #1</span> <br />position: relative;
  <div id="div2">
    <br /><span class="bold">DIV #2</span> <br />position: absolute;
    <br />z-index: 1;
  </div>
</div>

<br />

<div id="div3">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
  <div id="div4">
    <br /><span class="bold">DIV #4</span> <br />position: absolute;
    <br />z-index: 2;
  </div>
</div>

CSS

css
.bold {
  font-family: Arial;
  font-size: 12px;
  font-weight: bold;
}

#div1,
#div3 {
  height: 80px;
  position: relative;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  padding-left: 5px;
}

#div2 {
  opacity: 0.8;
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 200px;
  top: 20px;
  left: 170px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}

#div4 {
  opacity: 0.8;
  z-index: 2;
  position: absolute;
  width: 200px;
  height: 80px;
  top: 65px;
  left: 50px;
  border: 1px dashed #000099;
  background-color: #ddddff;
  text-align: left;
  padding-left: 10px;
}

結果

另請參閱