堆疊上下文示例 2

描述

這是一個非常簡單的示例，但它是理解堆疊上下文概念的關鍵。它與前一個示例具有相同的四個 DIV，但現在在層次結構的兩個級別上都分配了z-index屬性。

您可以看到 DIV #2（z-index: 2）位於 DIV #3（z-index: 1）之上，因為它們都屬於同一個堆疊上下文（根堆疊上下文），所以 z-index 值決定了元素的堆疊方式。

奇怪的是，儘管它們的 z-index 值不同，但 DIV #2（z-index: 2）位於 DIV #4（z-index: 10）之上。原因是它們不屬於同一個堆疊上下文。DIV #4 屬於由 DIV #3 建立的堆疊上下文，如前所述，DIV #3（及其所有內容）位於 DIV #2 之下。

為了更好地理解這種情況，以下是堆疊上下文層次結構

  • 根堆疊上下文
    • DIV #2（z-index: 2）
    • DIV #3（z-index: 1）
      • DIV #4（z-index: 10）

注意：值得記住的是，HTML 層次結構與堆疊上下文層次結構不同。在堆疊上下文層次結構中，不建立堆疊上下文的元素在其父元素上被摺疊。

示例

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: 2;
  </div>
</div>

<br />

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

CSS

css
div {
  font: 12px Arial;
}

span.bold {
  font-weight: bold;
}

#div2 {
  z-index: 2;
}
#div3 {
  z-index: 1;
}
#div4 {
  z-index: 10;
}

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

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

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

結果

另請參閱