いくつかの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
値を持つ特定の要素が最前になる。
【変更履歴】
- 【v5.0.0-alpha1】
- オフキャンバス・コンポーネントの新設に伴い
$zindex-offcanvas
を追加し、それより手前に表示されるものの値が10ずつ増える
- オフキャンバス・コンポーネントの新設に伴い
ページ移動
前のページ
レイアウトユーティリティ次のページ
ページがありません
レイアウトユーティリティ次のページ
ページがありません