ドロップダウンメニューとポップオーバーのz-index

ドロップダウンメニューのz-index戦略

ドロップダウンメニューは周囲のページコンテンツの上に表示する必要がありますが、モーダル、トースト、ツールチップなどのより優先度の高いレイヤーの下に表示する必要があります。

典型的なレイヤー階層

:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

実装

/* 基本的なドロップダウン */
.dropdown-menu {
  position: absolute;
  z-index: var(--z-dropdown);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* スティッキーヘッダー内のドロップダウン */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
}

.sticky-header .dropdown-menu {
  z-index: var(--z-sticky); /* 親のコンテキストを継承 */
}

よくある問題と修正

問題1：overflow:hiddenの親でドロップダウンがクリップされる

/* 悪い例：ドロップダウンがクリップされる */
.card { overflow: hidden; }
.card .dropdown-menu { z-index: 1000; } /* クリップされる！ */

/* 修正：ポータルまたはposition:fixedを使用 */
.dropdown-menu--portal {
  position: fixed;
  z-index: var(--z-dropdown);
}

ベストプラクティス

• ドロップダウンメニューには常にposition: absoluteまたはposition: fixedを使用
• 複雑なレイアウトではポータル（React Portal、Vue Teleport）の使用を検討
• ハードコードされた数値ではなく一貫したz-index変数を使用
• モーダル内、スティッキーヘッダー内、overflowコンテナ内でドロップダウンをテスト