Zインデックス Z-index

ローレベルのz-indexユーティリティを使用して、要素またはコンポーネントのスタックレベルを素早く変更します。

On this page

例

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

デフォルト値の-1から3までのため、これらを「ローレベル」z-indexユーティリティと呼びます。これらは、重複するコンポーネントのレイアウトに使用します。ハイレベルのz-index値は、modalやtooltipなどのoverlayコンポーネントに使用されます。

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のoverlayコンポーネント（dropdown、modal、offcanvas、popover、toast、tooltip）には、インターフェースの競合する「レイヤー」で使いやすいエクスペリエンスを保証するために、独自のz-index値があります。

z-indexレイアウトページで詳細をご覧ください。

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

一部のコンポーネントでは、互いに重なる繰り返し要素（button groupのbutton、list groupのitemなど）を管理するために、ローレベルのz-index値を使用しています。

z-indexアプローチについて学びます。

CSS

Sassマップ

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

scss/_variables.scss

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

SassユーティリティAPI

Positionユーティリティは、scss/_utilities.scssのutilities APIで宣言されています。utilities APIの使用方法を学びます。

scss/_utilities.scss

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