Z-index

例

要素を重ねるにはz-indexユーティリティを使用します。static以外のposition値が必要で、カスタムスタイルで設定するか、ポジションユーティリティを使用します。

<div class="z-3 position-absolute p-5 rounded-3"><span>z-3</span></div>
<div class="z-2 position-absolute p-5 rounded-3"><span>z-2</span></div>
<div class="z-1 position-absolute p-5 rounded-3"><span>z-1</span></div>
<div class="z-0 position-absolute p-5 rounded-3"><span>z-0</span></div>
<div class="z-n1 position-absolute p-5 rounded-3"><span>z-n1</span></div>

オーバーレイ

Bootstrapのオーバーレイコンポーネント（ドロップダウン、モーダル、オフキャンバス、ポップオーバー、トースト、ツールチップ）は、インターフェイスの競合する「レイヤー」で使いやすいエクスペリエンスを保証するために、すべて独自のz-index値を持っています。

z-indexレイアウトページを参照してください。

コンポーネントのアプローチ

一部のコンポーネントでは、低レベルのz-index値を使用して、互いに重なり合う繰り返し要素を管理します（ボタングループのボタンやリストグループのアイテムなど）。

z-indexのアプローチを参照してください。

CSS

Sassマップ

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

$zindex-levels: (
  n1: -1,
  0: 0,
  1: 1,
  2: 2,
  3: 3
);

SassユーティリティAPI

ポジションユーティリティはscss/_utilities.scssのユーティリティAPIで宣言されています。ユーティリティAPIの使い方はこちらをご覧ください。

"z-index": (
  property: z-index,
  class: z,
  values: $zindex-levels,
)