Z-index

要素またはコンポーネントのスタックレベルをすばやく変更するには、低レベルの z-index ユーティリティを使用してください。

このページの内容

例

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

これらを「低レベル」のz-indexユーティリティと呼ぶのは、そのデフォルト値が-1から3であり、重複するコンポーネントのレイアウトに使用しているためです。高レベルのz-index値は、モーダルやツールチップなどのオーバーレイコンポーネントに使用されます。

z-3

z-2

z-1

z-0

z-n1

html

<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マップをカスタマイズして、使用可能な値と生成されるユーティリティを変更します。

scss/_variables.scss

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

SassユーティリティAPI

位置ユーティリティは、scss/_utilities.scssのユーティリティAPIで宣言されています。ユーティリティAPIの使用方法を学んでください。

scss/_utilities.scss

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