Z-インデックス

Bootstrap のグリッドシステムの一部ではありませんが、z-index は、コンポーネントが互いに重なり合い、相互作用する方法において重要な役割を果たします。

いくつかの Bootstrap コンポーネントはz-index、コンテンツを配置するための 3 番目の軸を提供することによってレイアウトを制御するのに役立つ CSS プロパティであるを利用します。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 桁未満z-indexの値を使用します。ホバー/フォーカス/アクティブでは、兄弟要素の上に境界線を表示するために、特定の要素をより高い値で最前面に移動します。123z-index