Z 索引與堆疊結構定義

CSS Podcast - 019：Z-index 和堆疊背景資訊

假設您設定了幾個絕對位置的元素，且應置於彼此上方。您可能需要編寫一些 HTML，如下所示：

<div class="stacked-items">
    <div class="item-1">Item 1</div>
    <div class="item-2">Item 2</div>
</div>

但系統會預設優先顯示哪一項？要瞭解哪個項目會執行這項動作 您需要瞭解 Z-index 和堆疊的情境

Z-index

z-index 屬性會根據瀏覽器的 3D 空間 (Z 軸) 明確設定 HTML 的圖層順序。這個軸表示距離您更近的圖層。網路上的垂直軸為 Y 軸，水平軸為 X 軸。

z-index 屬性接受數值，可以是正數或負數。如果元素的 z-index 值較高，該元素就會顯示在其他元素上方。如果元素上未設定 z-index，則預設行為是文件來源順序取決於 Z 軸。也就是說，文件下方的元素會位於文件之前的元素上方。

在正常流程中，如果您為 z-index 設定了特定值但無效，您必須將元素的 position 值設為 static 以外的任何值。很多人都無法順利使用 z-index。

不過，如果您正在使用 Flexbox 或格線，就屬於這種情況，因為您可以修改 Flexbox 或格線項目的 Z-index，而無需新增 position: relative。

負 Z-index

如要設定其他元素「後面」的元素，請為 z-index 新增負值。

.my-element {
    background: rgb(232 240 254 / 0.4);
}

.my-element .child {
    position: relative;
    z-index: -1;
}

只要 .my-element 擁有 auto 的 z-index 初始值，.child 元素就會位於該元素後方。

將下列 CSS 新增至 .my-element，但 .child 元素不會置於該元素後方。

.my-element {
  position: relative;
  z-index: 0;
  background: rgb(232 240 254 / 0.4);
}

由於 .my-element 現在有非 static 的 position 值，以及不是 auto 的 z-index 值，因此建立了新的堆疊結構定義。也就是說，即使您將 .child 的 z-index 設為 -999，仍然不會位於 .my-parent 後方。

堆疊背景資訊

堆疊內容是具有共同父項，且上下移動的一組元素。

在這個範例中，第一個父項元素的 z-index 為 1，因此會建立新的堆疊內容。其子元素的 z-index 為 999。在這個父項旁邊，有一個父項元素含有一個子項。父項的 z-index 為 2，而子項元素的 z-index 也為 2。 由於兩個父項都會建立堆疊結構定義，因此所有子項的 z-index 都是以其父項為基礎。

堆疊結構定義中元素的 z-index 一律會是相對於父項在其堆疊環境中的目前順序。

建立堆疊內容

您不需要套用 z-index 和 position 來建立新的堆疊結構定義。如要建立新的堆疊結構定義，您可以為屬性新增值以建立新的複合層，例如 opacity、will-change 和 transform。您可以在這裡查看完整的屬性清單。

假設網頁是畫布，說明複合圖層。瀏覽器需要您的 HTML 和 CSS，並利用這些技術來分析畫布大小。然後在這個畫布上繪製頁面。 如果元素有所變動 (例如改變位置)，瀏覽器就必須回頭處理要繪製的內容。

為提升效能，瀏覽器會另外建立層層疊加在畫布上的新複合圖層。這有點像便利貼： 移動並變更，並不會對整體畫布造成太大影響。 系統會為使用 opacity、transform 和 will-change 的元素建立新的複合層，因為這些圖層可能會變動，因此瀏覽器會使用 GPU 套用樣式調整，盡可能確保變更的效能良好。

資源

• 強制圖層
• 動畫指南：強制建立圖層
• 瞭解 Z-index

隨堂測驗

測驗您對 Z-index 的相關知識

<section>
  <article>1</article>
  <article>2</article>
  <article>3</article>
  <article>4</article>
</section>