Z 索引與堆疊結構定義

假設你有兩個固定位置的元素 不能相鄰。 您可以按照以下方式編寫一些 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 擁有 autoz-index 初始值, .child 元素會放在元素後方。

將下列 CSS 新增至 .my-element。 後面不會放置 .child 元素

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

因為 .my-element 現在的 position 值不是 static 以及不是 autoz-index 值。 而建立了新的堆疊結構定義。 也就是說,即使將 .childz-index 設為 -999, 它還是不在.my-parent後方。

堆疊背景資訊

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

在這個例子中 第一個父項元素的 z-index1。 系統會建立新的堆疊內容 其子元素的 z-index999。 這個父項旁邊還有另一個父項元素,有一個子項。 父項的 z-index2,而子項元素的 z-index 也是 2。 兩個父項都會產生堆疊的背景資料 所有兒童的 z-index 都會根據上層發布商的設定計算得出。

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

建立堆疊結構定義

不必套用 z-indexposition 即可建立新 堆疊背景資訊。 您可以為會建立新複合圖層的屬性新增值,以建立新的堆疊內容 例如 opacitywill-changetransform 你可以 請參閱這裡的完整清單

為了說明複合圖層,假設網頁是畫布, 瀏覽器會擷取 HTML 和 CSS,並運用這些元素找出製作畫布的視窗。 然後把頁面繪製在這個畫布上。 假設某個元素需要變動,例如 而會改變位置 — 瀏覽器必須重新設計出要繪製什麼內容。

有鑑於此 瀏覽器建立新的複合圖層,並疊加在畫布上。 這有點像事後筆記: 移動及變更圖片就不會對整體畫布造成顯著影響。 系統會為含有 opacity 的元素建立新的複合圖層, transformwill-change,因為它們很有可能改變 因此瀏覽器會使用 GPU 套用樣式調整,盡可能確保變更效能。

資源

隨堂測驗

測試您對 Z-index 的瞭解程度

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

哪篇文章預設為顯示在最上方?

3
1
4
2

如果 Z-index 無法運作,您應該檢查元素的哪項屬性?

position
animation
display
relative

是否需要 Flexbox 和格線需要 position: relative