使用 z-index

本指南的第一篇文章，在沒有 z-index 屬性的情況下堆疊，解釋了預設情況下如何安排堆疊。如果要建立自定義堆疊順序，可以在已定位元素上使用z-index屬性。

z-index屬性可以使用整數(正數、零或負數)指定，表示元素沿虛構的 z 軸的位置。如果您不熟悉“z 軸”這個術語，可以將頁面想象成一堆圖層，每個圖層都有一個編號。圖層按數字順序渲染，較大的數字在較小的數字之上(X表示任意正整數)

圖層 描述
底部圖層 離觀察者最遠
圖層 -X 具有負 z-index 值的圖層
圖層 0 預設渲染圖層
圖層 X 具有正 z-index 值的圖層
頂部圖層 離觀察者最近

注意

  • 當未指定z-index屬性時，元素將在預設渲染圖層(圖層 0)上呈現。
  • 如果多個元素共享相同的z-index值(即它們放置在同一圖層上)，則應用在在沒有 z-index 屬性的情況下堆疊部分中解釋的堆疊規則。

示例

在此示例中，圖層的堆疊順序使用z-index重新排列。DIV #5 的z-index無效，因為它不是已定位的元素。

HTML

html
<div id="abs1">
  <strong>DIV #1</strong>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <strong>DIV #2</strong>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <strong>DIV #3</strong>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <strong>DIV #4</strong>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <strong>DIV #5</strong>
  <br />no positioning <br />z-index: 8;
</div>

CSS

css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

strong {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}

結果

另請參閱