Z-index

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

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

これらの個々の値のカスタマイズは推奨していません。1つを変更すると、すべての値を変更する必要がある可能性があります。

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

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