CSSスタッキングコンテキストの理解

スタッキングコンテキストとは？

スタッキングコンテキストは、z軸（ビューアーに向かうまたは離れる方向）に沿ったHTML要素の3次元的な概念化です。要素がスタッキングコンテキストを形成すると、子要素のz-index値がページの残りの部分とは独立して解決される自己完結型のレイヤーが作成されます。

スタッキングコンテキストを作成するプロパティ

いくつかのCSSプロパティが新しいスタッキングコンテキストをトリガーします：

/* z-indexがauto以外の配置された要素 */
.ctx-1 {
  position: relative;
  z-index: 1;
}

/* opacityが1未満の要素 */
.ctx-2 {
  opacity: 0.99;
}

/* transformを持つ要素 */
.ctx-3 {
  transform: translateZ(0);
}

/* filterを持つ要素 */
.ctx-4 {
  filter: blur(0);
}

/* will-changeを持つ要素 */
.ctx-5 {
  will-change: transform;
}

/* z-indexを持つFlex/Gridの子要素 */
.ctx-6 {
  z-index: 1; /* flexまたはgridコンテナ内 */
}

スタッキングコンテキストがz-indexに重要な理由

重要なルール：z-index値は同じスタッキングコンテキスト内でのみ比較されます。z-index: 1のスタッキングコンテキスト内のz-index: 999999の子要素は、z-index: 2の兄弟スタッキングコンテキストの上に表示されることはありません。これがほとんどの「z-indexが効かない」というフラストレーションの根本原因です。

スタッキングコンテキストの特定

ブラウザのDevToolsを使用してスタッキングコンテキストツリーを調べます。ChromeではLayersパネルがコンポジットレイヤーの3D表示を提供します。Firefoxの3D Viewも同様の機能を持ちます。この階層を理解することはz-index問題のデバッグに不可欠です。

ベストプラクティス

z-indexシステムでスタッキングコンテキストを作成するレイヤーをマークしましょう。このツールでは各レイヤーの「ctx」フラグを切り替えることで、CSSを書く前に実際のスタッキング動作を推論できます。