理解 z-index

z 軸上的層

頁面上渲染的元素由一系列盒子組成。每個盒子在三維空間中都有一個位置。除了其行內和塊級位置之外，盒子還沿著被稱為 z 軸的第三維放置。當元素盒子在視覺上重疊時，控制元素的 z 軸位置變得尤為重要。一些屬性值可能導致元素重疊。z-index 屬性為您提供了一種控制它們如何重疊的方法！

預設情況下，元素盒子渲染在第 0 層。z-index 屬性允許您除了預設渲染層之外，將元素放置在 z 軸上不同的層上。每個元素沿著假想 z 軸的位置（z-index 值）表示為一個整數（正、負或零），並控制渲染時的堆疊順序。數字越大意味著元素離觀察者越近。

如果您不熟悉“z 軸”這個術語，請將頁面想象成一堆層，每層都有一個分配的數字。層按數字順序渲染，數字大的層顯示在數字小的層之上（下表中的 X 代表任意正整數）

正常流中的元素

預設情況下，當未指定 z-index 屬性時，元素會在預設渲染層（第 0 層）上渲染。

考慮以下三個元素

<div id="div1">#1</div>
<div id="div2">#2</div>
<div id="div3">#3</div>

在未應用任何定位屬性的情況下，這些元素按文件順序正常流動，一個接一個，互不重疊。

div {
  height: 100px;
  width: 100px;
  outline: 1px dotted;
  line-height: 100px;
  font-size: 40px;
  text-align: center;
  font-family: "Helvetica", "Arial", sans-serif;
}

#div1 {
  background-color: lightpink;
}

#div2 {
  background-color: lightyellow;
}

#div3 {
  background-color: lightgreen;
}

預設分層行為

要堆疊元素，我們可以對它們進行定位。如果我們使用絕對定位將它們放置在（幾乎）相同的位置，預設的堆疊順序遵循源順序：HTML 中第一個元素顯示在最底層，最後一個元素顯示在最頂層。

div {
  position: absolute;
}

#div1 {
  top: 0;
  left: 0;
}

#div2 {
  top: 10px;
  left: 10px;
}

#div3 {
  top: 20px;
  left: 20px;
}

重新排列層

我們可以使用 CSS z-index 屬性來定位每個元素沿 z 軸，從而有效地重新排列堆疊順序。

透過新增 z-index 值，我們改變了預設的層順序

#div1 {
  z-index: 5;
}

#div2 {
  z-index: -9;
}

#div3 {
  z-index: 0;
}

z-index 值最低的元素顯示在最底層。z-index 值最高的元素顯示在最頂層。在此示例中，-9 是最低值，因此 #div2 在所有其他元素之後。源順序中的第一個元素 #div1 具有最大值，因此它顯示在所有其他元素之上。

堆疊上下文的影響

z-index 的使用乍一看似乎相當簡單：一個屬性被賦予一個整數，其行為似乎易於理解。當 z-index 應用於複雜的 HTML 元素層級結構時，許多人發現其產生的行為難以理解或預測。

如果元素不是兄弟元素，堆疊行為會變得更加複雜，因為每個元素可能屬於不同的堆疊上下文。這在下面的示例中有所體現。

<section>
  <div id="div1">#1</div>
  <div id="div2">#2</div>
</section>
<div id="div3">#3</div>

section {
  position: absolute;
  z-index: 2;
}

儘管 #div3 的 z-index 值 (0) 大於 #div2 (-9)，但 #div2 出現在 #div3 之上，因為 #div1 和 #div2 巢狀在由 <section> 建立的單獨堆疊上下文。<section> 元素和 #div3 是兄弟元素，由於 <section> 元素的 z-index 大於 #div3 (2 對 0)，所以 #div3 放置在 <section> 及其所有內容之後。有關此主題的更深入詳細資訊，請參閱我們的堆疊上下文指南。

總結

正如我們在本指南中看到的那樣，z-index 提供了一種控制元素沿 z 軸堆疊方式的方法。您學習瞭如何使用 z-index 屬性的整數值來改變堆疊順序。然而，正如最後一個示例所示，堆疊順序可能很複雜。堆疊順序遵循一系列複雜的堆疊規則，以確保所有瀏覽器以相同的方式堆疊相同的內容，從而提供一致性和可預測性。理解建立堆疊上下文的特徵以及巢狀堆疊上下文如何影響層順序非常重要。

另見

• 不使用 z-index 屬性的堆疊
• 層疊浮動元素
• 使用 z-index
• 層疊上下文
• CSS 定位佈局模組