メインコンテンツにスキップ ドキュメントナビゲーションにスキップ
Check

z-indexユーティリティ(Z-index) v5.3.0新設

低レベルの z-index ユーティリティを使用すると、要素やコンポーネントのスタックレベルをすばやく変更することができる。

※"v5.3.0"での変更はv5.3.0-alpha版、v5.3.0-beta版での変更も含みます。
このページの項目 v5.3.0新設

実例(Example)

z-index ユーティリティを使用して、要素を互いに積み重ねる。static 以外の position 値が必要で、これはカスタムスタイルや位置ユーティリティで設定できる。

見本見やすいよう色と枠を付けています
.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 map)

このSassマップをカスタマイズすれば、利用可能な値や生成されるユーティリティが変更できる。

デフォルトの設定
scss/_variables.scss 内 zindex-levels-map の設定$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);