コンポーネントスコープのz-indexアーキテクチャ

コンポーネントスコープのz-index

モダンなWebアプリケーションはコンポーザブルなコンポーネントから構築されます。各コンポーネントはグローバルなスタッキング順序に影響を与えることなく、独自の内部z-indexを管理すべきです。これは2層のz-indexアーキテクチャで実現されます。

2層z-indexシステム

/* 第1層：グローバルz-indexスケール（アプリケーションレベル） */
:root {
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-overlay: 1040;
  --z-modal: 1050;
  --z-toast: 1080;
  --z-tooltip: 1090;
}

/* 第2層：ローカルz-index値（コンポーネントレベル） */
/* 小さな数値：1, 2, 3 */
/* コンポーネントのスタッキングコンテキスト内でのみ機能 */

実装

/* 内部レイヤリングを持つカードコンポーネント */
.card {
  position: relative;
  isolation: isolate; /* スコープされたスタッキングコンテキストを作成 */
}

.card__image { z-index: 1; }
.card__gradient-overlay { z-index: 2; }
.card__content { z-index: 3; }
.card__badge { z-index: 4; }

コンポーネントスコープz-indexのルール

1. グローバル値はコンポーネントルートのみ：コンポーネントの最外部要素のみがグローバルz-indexスケールを使用。
2. 内部にはローカル値：内部要素は小さく連続したz-index値（1, 2, 3）を使用。
3. 常にisolationを使用：z-indexされた子要素を含むコンポーネントルートにisolation: isolateを追加。
4. コンポーネント内部でグローバル値を参照しない：カードのバッジはz-index: 4を使用し、z-index: 1090は使わない。