[Note] z-index 和 Stacking Context

• 👍 The stacking context
• z-index and stacking context @ 前端開發 30 個問題

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 (!auto)
  • position: relative + z-index (!auto)
  • position: fixed; 和 position: sticky;
  • flex item + z-index (!auto)
  • grid item + z-index (!auto)
  • opacity 小於 1 的元素
    • min-blend-mode、transform、scale、rotate、transalte、backdrop-filter、will-change 等等...

見 MDN 的詳細說明：