Bootstrapにおけるz-indexの正しい使い方

はじめに

Web開発で要素を重ねて表示する際に使用するz-index。
「とにかく最前面に表示したい！」という思いでz-index: 9999と設定した経験はありませんか？
実は、この方法には大きな問題があります！！！
本記事では、Bootstrapを使用する際の適切なz-index設定について解説します。

z-indexとは？

z-indexは、HTML要素の重なり順を制御するCSSプロパティです。
数値が大きいほど前面に表示されます。

なぜz-index: 9999は問題なのか？

1. モーダルやポップオーバーが正しく表示されない

   • Bootstrapの重要なコンポーネント（モーダルウィンドウなど）が隠れてしまう可能性がある
   • ユーザー体験の低下につながる

2. 保守性の低下

   • 数値の根拠が不明確
   • 後から修正が困難となることがある
   • チーム開発での混乱の原因になる可能性がある

Bootstrapにおける正しいz-index値

Bootstrapでは、以下のような標準的なz-index値が定義されています

$zindex-dropdown:          1000  // ドロップダウンメニュー
$zindex-sticky:           1020  // 固定ヘッダーなど
$zindex-fixed:            1030  // position: fixedの要素
$zindex-modal-backdrop:   1040  // モーダルの背景
$zindex-modal:            1050  // モーダルウィンドウ
$zindex-popover:          1060  // ポップオーバー
$zindex-tooltip:          1070  // ツールチップ

推奨される使用方法

1. 小さな値から始める

   • 通常の要素の重なりは1〜3程度の値で十分です
   • 例：ホバー時のドロップダウンはz-index: 2など

2. Bootstrapの標準値を参考にする

   • カスタム要素を作る場合は、近い役割のコンポーネントの値を参考にする
   • 例：カスタムポップアップは1050前後を検討する

3. コンポーネント内での相対的な値設定

   .parent {
     position: relative;
     z-index: 1;
   }
   .child {
     position: absolute;
     z-index: 2;  /* 親要素より1大きい値 */
   }
   

よくある使用シーンと推奨値

1. ナビゲーションバー

   .navbar {
     z-index: 1020;  /* sticky要素と同じ値 */
   }
   

2. カスタムドロップダウン

   .custom-dropdown {
     z-index: 1000;  /* Bootstrapのドロップダウンと同じ値 */
   }
   

3. オーバーレイ要素

   .overlay {
     z-index: 1040;  /* モーダル背景と同じ値 */
   }
   

参考リンク

1. Bootstrap公式ドキュメント - z-index
2. MDN - z-index
3. Stacking Context（重ね合わせコンテキスト）の理解

まとめ

• z-index: 9999のような大きな値は避ける
• Bootstrapの標準値を参考に、必要最小限の値を設定する
• コンポーネント内では相対的な小さな値（1-3）を使用する
• 迷った場合は、Bootstrap公式ドキュメントを確認する

この原則に従うことで、より保守性が高く、予測可能な動作をするレイアウトを実現できます。