Z-index

Bootstrap のグリッドシステムには関係ありませんが、z-index はコンポーネントがどのように重ね合わされ、互いに相互作用するかにおいて重要な役割を果たします。

Bootstrap コンポーネントのうち、いくつかはコンテンツを配置する第 3 の z 軸を提供することでレイアウトを制御するのに役立つ CSS プロパティ z-index を利用しています。ナビゲーション、ツールチップとポップオーバー、モーダルなどを適切に配置するために設計した Bootstrap 用の z-index レベルを用意しています。

z-index は、コンフリクトを避けるのに極めて大きな値から始まります。z 軸に配置されたコンポーネント(ツールチップ、ポップアップ、ナビバー、ドロップダウン、モーダルなど)全体で、これらの標準的なセットが必要です。これが 100+ や 500+ といった値を使わない理由です。

これらの値のカスタマイズは非推奨です。

$zindex-dropdown:                   1000;
$zindex-sticky:                     1020;
$zindex-fixed:                      1030;
$zindex-modal-backdrop:             1040;
$zindex-offcanvas:                  1050;
$zindex-modal:                      1060;
$zindex-popover:                    1070;
$zindex-tooltip:                    1080;

コンポーネント内で重なり合う境界線(例えば、入力グループ内のボタンや入力など)を扱うために、デフォルト、ホバー、アクティブの各状態では、一桁の低い z-index 値 1, 2, 3 を使用しています。ホバー/フォーカス/アクティブ状態では、特定の要素を前面に出して z-index の値を高くすることで、兄弟要素との境界線を表示します。