Skip to main content

z-index について

ここでは、プロジェクトで統一して利用するz-indexの基準値について説明します。

z-indexは CSS カスタムプロパティ（CSS変数）で管理する​

z-indexの値はグローバルで管理し、再利用可能にするためCSSカスタムプロパティで定義します。

:root {
  --z-index-header: 100;
  --z-index-modal: 200;
}

定義したCSSカスタムプロパティは、var() 関数を使って適用します。

.modal {
  position: relative;
  z-index: var(--z-index-modal);
}

同じレイヤー内で微調整が必要な場合は、基準値に対して計算式を使用できます。

/* ヘッダー内の要素を1段階上に配置する例 */
.header__notification {
  position: relative;
  z-index: calc(var(--z-index-header) + 1);
}

UI要素別の z-index 基準値​

UI要素値説明
hide-1要素を非表示にする場合に使用
base0通常の要素の初期値
decorator50疑似要素（::before, ::after）、装飾的な境界線などの配置用
dropdown1000ドロップダウンメニューの配置用
sticky1200position: sticky で固定する要素（ヘッダーなど）の配置用
banner1300通知バナーやアラートの配置用
overlay1400モーダルの背景オーバーレイなどの配置用
modal1500モーダルウィンドウの配置用
popover1600ポップオーバーメニューの配置用
toast1700トースト通知の配置用
tooltip1800ツールチップの配置用
Last updated on