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 或網格中，則這不適用於 因為您可以修改 Flex 或格線項目的 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 現在的 position 值不是 static 以及不是 auto 的 z-index 值。 而建立了新的堆疊結構定義。 也就是說，即使將 .child 的 z-index 設為 -999， 它還是不在.my-parent後方。

堆疊背景資訊

堆疊情境是指一組元素，且元素具有共同的父項，且會在 Z 軸上上下移動。

在這個例子中 第一個父項元素的 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>