Z-index v5.0.0-alpha1概要より分離

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

これらは、理想的に競合を回避するのに十分な任意の高めの値から始まっている。ツールチップ、ポップオーバー、ナビゲーションバー、ドロップダウン、モーダルなどレイヤー化されたコンポーネント全体で合理的に動作の一貫性を持たせるために、これらの標準セットが必要。100+ や 500+ を使用しなかった理由は特にない。

これらの値のカスタマイズは推奨しない。1つ変えたら、すべて変更する必要がある。

デフォルトの設定

scss/_variables.scss 内$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-offcanvas:                  1040 !default; v5.0.0-alpha1追加
$zindex-modal-backdrop:             1050 !default; v5.0.0-alpha1変更
$zindex-modal:                      1060 !default; v5.0.0-alpha1変更
$zindex-popover:                    1070 !default; v5.0.0-alpha1変更
$zindex-tooltip:                    1080 !default; v5.0.0-alpha1変更

scss/_variables.scss 内$zindex-dropdown:                   1000 !default;
$zindex-sticky:                     1020 !default;
$zindex-fixed:                      1030 !default;
$zindex-modal-backdrop:             1040 !default;
$zindex-modal:                      1050 !default;
$zindex-popover:                    1060 !default;
$zindex-tooltip:                    1070 !default;

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