7onicDESIGN SYSTEM

z-Index

UI要素の重なり順を一貫したルールで管理します。Dropdown、Modal、Tooltipなどのレイヤーが衝突しない設計です。

z-Index Scale

基本値とセマンティックトークンの2つのカテゴリで構成されています。

基本値（0-50）

0
z-0
10
z-10
20
z-20
30
z-30
40
z-40
50
z-50

セマンティック値

z-sticky100

スティッキーヘッダー、固定要素

z-dropdown1000

ドロップダウンメニュー、セレクト

z-overlay1100

オーバーレイ、バックドロップ

z-modal2000

モーダルダイアログ

z-popover2100

ポップオーバー、ホバーカード

z-tooltip2200

ツールチップ

z-toast3000

トースト通知（最上位）

Interactive Demo

各要素をクリックして、z-indexによる重なり順を確認できます。

Base Content
z-index: 0
Dropdown
z-1000
Modal Dialog
z-index: 2000

ドロップダウンより前面に表示されます

Tooltip
z-2200

Recommended Values

各UIコンポーネントに適したz-indexトークン

Header (sticky)

z-sticky
100

Dropdown Menu

z-dropdown
1000

Select Options

z-dropdown
1000

Backdrop/Overlay

z-overlay
1100

Modal/Dialog

z-modal
2000

Popover

z-popover
2100

Tooltip

z-tooltip
2200

Toast/Notification

z-toast
3000

Layer Hierarchy

z-indexの値が高いほど前面に表示されます。

Base通常コンテンツ
z-0-50
Sticky固定ヘッダー
z-100
Dropdownメニュー
z-1000
Overlay背景マスク
z-1100
Modalダイアログ
z-2000
Popoverポップアップカード
z-2100
Tooltipホバーヒント
z-2200
Toast通知メッセージ
z-3000
上に行くほどz-index値が高く、前面に表示

Common Issues

z-index関連のよくある問題と解決方法

モーダルがドロップダウンの後ろに隠れる

→ ドロップダウンが新しいスタッキングコンテキストを作成している

✓ Portalを使用してモーダルをbody直下にレンダリング

z-index: 9999でも要素が前面に来ない

→ 親要素のスタッキングコンテキストに制限されている

✓ 親要素のz-indexを確認、またはisolation: isolateを使用

position: fixedの要素がモーダルの後ろに

→ fixedでも適切なz-indexが必要

✓ z-modalより高いz-index（z-toast等）を使用

Stacking Context

スタッキングコンテキストとは

z-indexは同じスタッキングコンテキスト内でのみ比較されます。 新しいスタッキングコンテキストは以下の場合に作成されます：

  • •position: absolute/relative/fixedと z-index が設定された要素
  • •opacity が 1 未満の要素
  • •transform、filter、perspective が設定された要素
  • •isolation: isolate が設定された要素

Best Practices

✓

推奨

  • ✓セマンティックトークン（z-modal等）を使用する
  • ✓Portalを使用してモーダルをbody直下に配置
  • ✓isolation: isolateでコンテキストを明示的に制御
  • ✓z-indexの階層設計を事前に計画する
✕

避けるべき

  • ✗z-index: 9999 などの任意の大きな値
  • ✗問題が起きるたびにz-indexを増やす
  • ✗スタッキングコンテキストを考慮しない実装
  • ✗ハードコードされたz-index値の乱用