Bootstrap z-indexスケールリファレンス

Bootstrap z-indexスケール

Bootstrapは、すべてのコンポーネント間で一貫したレイヤリングを提供する慎重に設計されたz-indexスケールを使用しています。このスケールの理解は、Bootstrapのカスタマイズやサードパーティコンポーネントの統合に不可欠です。

完全なスケール

// Bootstrap 5.x z-index値
$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. 1000から開始：フレームワークの下にカスタムアプリケーションレイヤーの余地を残します。アプリは1-999をBootstrapと競合せずにカスタムスタッキングに使用できます。

2. 値間のギャップ：10-20のギャップにより、必要に応じてフレームワークコンポーネント間にカスタムレイヤーを挿入できます。

3. バックドロップ値：バックドロップは対応するコンポーネントのすぐ下に配置されます。

4. トーストがモーダルの上：Bootstrapはトーストを1090、モーダル（1055）の上に配置し、モーダルが開いていてもフィードバックメッセージが常に表示されます。

Bootstrapのスケールのカスタマイズ

// Bootstrapをインポートする前に_variables.scssでオーバーライド
$zindex-modal-backdrop: 1060;
$zindex-modal: 1065;
// カスタムレベルの追加
$zindex-my-sidebar: 1010;