z-indexユーティリティ（Z-index） v5.3.0新設
低レベルの z-index ユーティリティを使用すると、要素やコンポーネントのスタックレベルをすばやく変更することができる。
※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.3.0新設
実例（Example）
z-index ユーティリティを使用して、要素を互いに積み重ねる。static 以外の position 値が必要で、これはカスタムスタイルや位置ユーティリティで設定できる。
これらの
z-index ユーティリティを"低レベル"と呼ぶのは、デフォルト値が -1 〜 3 であり、オーバーラップするコンポーネントのレイアウトに使用するため。高レベルの z-index 値は、モーダルやツールチップのようなオーバーレイコンポーネントで使用される。
見本見やすいよう色と枠を付けています
.z-3
.z-2
.z-1
.z-0
.z-n1
設定例
<div class="z-3 position-absolute p-5 rounded-3"></div>
<div class="z-2 position-absolute p-5 rounded-3"></div>
<div class="z-1 position-absolute p-5 rounded-3"></div>
<div class="z-0 position-absolute p-5 rounded-3"></div>
<div class="z-n1 position-absolute p-5 rounded-3"></div>【設定】
- 一番奥（
z-index: -1）：.z-n1 - その手前（
z-index: 0）：.z-0 - その手前（
z-index: 1）：.z-1 - その手前（
z-index: 2）：.z-2 - 一番手前（
z-index: 3）：.z-3
オーバーレイ（Overlays）
Bootstrapのオーバーレイコンポーネント（ドロップダウン、モーダル、オフキャンバス、ポップオーバー、トースト、ツールチップ）は、インターフェイスの"レイヤー"が重なったときに使いやすいように、すべて独自の z-index 値を持つ。
それらについては、z-indexのレイアウトに掲載。
コンポーネント・アプローチ（Component approach）
コンポーネントによっては、低レベルの z-index 値を使用して、互いに重なり合う繰り返し要素（ボタングループのボタンやリストグループのアイテムなど）を管理。
それらについての説明は、z-indexスケールに掲載。
CSS
Sassマップ（Sass maps）
このSassマップをカスタマイズすれば、利用可能な値や生成されるユーティリティが変更できる。
デフォルトの設定
scss/_variables.scss 内 zindex-levels-map の設定$zindex-levels: (
n1: -1,
0: 0,
1: 1,
2: 2,
3: 3
);
SassユーティリティAPI（Sass utilities API）v5.3.0追加
z-indexユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。
デフォルトの設定
scss/_utilities.scss 内 utils-zindex の設定"z-index": (
property: z-index,
class: z,
values: $zindex-levels,
)
ページ移動
次のページ
ページがありません
ページがありません