モーダルとオーバーレイのz-indexパターン

モーダルとオーバーレイのz-indexパターン

モーダルは最も一般的なz-indexの課題の1つです。典型的なモーダルシステムには、少なくとも3つのレイヤーが必要です：バックドロップ/オーバーレイ、モーダルダイアログ自体、そしてモーダルの上に表示すべき要素（トーストやツールチップなど）。

推奨レイヤー構造

:root {
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-modal-close: 1;   /* モーダルのスタッキングコンテキスト内で相対的 */
  --z-toast: 1080;
  --z-tooltip: 1090;
}

実装

/* バックドロップがビューポート全体をカバー */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(0, 0, 0, 0.5);
}

/* モーダルダイアログはバックドロップの上 */
.modal {
  position: fixed;
  z-index: var(--z-modal);
  isolation: isolate; /* 内部z-indexをスコープ */
}

/* 閉じるボタンはモーダルのコンテキスト内で相対的 */
.modal-close {
  position: absolute;
  z-index: var(--z-modal-close);
  top: 1rem;
  right: 1rem;
}

/* トーストはモーダルの上に表示 */
.toast-container {
  position: fixed;
  z-index: var(--z-toast);
}

重要な考慮事項

1. バックドロップとモーダルは兄弟要素にするべきです。バックドロップがモーダルの親の場合、モーダルのz-indexはバックドロップのスタッキングコンテキストに対して相対的になります。

2. モーダルにisolation: isolateを使用して、閉じるボタン、モーダル内のドロップダウンメニューなどの内部要素のためのクリーンなスタッキングコンテキストを作成します。

3. ポータルレンダリング：React、Vue、Angularでは、ポータルを使用してモーダルをdocument bodyにレンダリングします。これにより、親のスタッキングコンテキスト内に閉じ込められるのを防ぎます。

4. 複数のモーダル：アプリがモーダルのスタッキングをサポートする場合、z-indexを動的にインクリメントします。

アンチパターン

• overflow: hiddenやtransformを持つコンテナ内にモーダルを配置すること
• 意図的なスケールの代わりにz-index: 999999を使用すること
• バックドロップを兄弟要素にする代わりにモーダル内にネストすること