跳至主要内容

[Note] z-index 和 Stacking Context

TL;DR;

  • 同一個 stacking context 內的元素才能用 z-index 比較,所以 DIV#1(1-5) > DIV###(1-4) > DIV#2(1-2)。
  • DIV#4、DIV#5、DIV#6 都在 DIV3 這個 stacking context 內,它們的 z-index 才能互相比較,所以它們 z-index 的值,實際上比較類似 DIV#4(3-6)> DIV#6(3-3)> DIV#5(3-1)。
  • 下列情況都會建立一個 stacking context,且在該 context 內的 z-index 才能互相比較:
    • position: absolute + z-index
    • position: relative + z-index
    • position: fixed;position: sticky;
    • flex + z-index
    • grid + z-index
    • opacity 小於 1
    • min-blend-mode、transform、will-change 等等...

MDN 的詳細說明:

Example of stacking rules modified using z-index