Zインデックス Z-index

いくつかのBootstrapコンポーネントはz-indexを利用しています。これは、コンテンツを配置する第3の軸を提供することでレイアウトの制御を支援するCSSプロパティです。Bootstrapでは、navigation、tooltips、popovers、modalsなどを適切にレイヤー化するように設計されたデフォルトのz-indexスケールを利用しています。

これらの高い値は、任意の数値から始まり、十分に高く具体的であり、競合を理想的に回避します。これらをレイヤー化されたコンポーネント（tooltips、popovers、navbars、dropdowns、modals）全体で標準的なセットが必要であり、動作において合理的に一貫性を保つことができます。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;

コンポーネント内の重なり合う境界線を処理するために（例：input groupsのボタンと入力）、デフォルト、hover、およびactiveの状態に対して1、2、および3の低い1桁のz-index値を使用します。hover/focus/activeでは、特定の要素をより高いz-index値で前面に持ってきて、兄弟要素の上に境界線を表示します。