Z-index

いくつかのBootstrapコンポーネントは、コンテンツを配置するための第3軸を提供することによりレイアウトの制御に役立つCSSプロパティであるz-indexを使用しています。Bootstrapでは、ナビゲーション、ツールチップとポッパー、モーダルなどを適切に重ね合わせるように設計されたデフォルトのz-indexスケールを使用しています。

これらのより高い値は、任意の数値から始まり、理想的には競合を回避するのに十分な高さで具体的に設定されています。重ね合わせられたコンポーネント（ツールチップ、ポッパー、ナビバー、ドロップダウン、モーダルなど）全体で、これらの標準セットが必要となるため、動作を合理的に一貫させることができます。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;

コンポーネント内（例：インプットグループのボタンとインプット）の重なり合うボーダーを処理するために、デフォルト、ホバー、アクティブ状態に対して1、2、3という低い1桁のz-index値を使用しています。ホバー/フォーカス/アクティブ時には、特定の要素をより高いz-index値で前面に表示することで、兄弟要素の上にボーダーを表示します。