[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
  • position: relative + z-index
  • position: fixed; 和 position: sticky;
  • flex + z-index
  • grid + z-index
  • opacity 小於 1
  • min-blend-mode、transform、will-change 等等...

見 MDN 的詳細說明：