Z-Index プロパティ

最終更新：2026-09-13

z-index Z-Index プロパティ

z-index プロパティは、position が指定された要素の z 軸（画面に垂直な方向）での重なり順（スタック順）を制御します。値が大きい要素ほど、小さい要素の上に描画されます。通常は position と組み合わせて、モーダルやドロップダウン、オーバーレイなど、階層化された UI に使われます。

カテゴリ
初期値	auto
継承	いいえ
適用対象	配置済み要素
アニメーションタイプ	integer
CSS バージョン	CSS2
状態	標準

📝 構文

z-index: auto | <integer>;

⚙️ 値

値	タイプ	説明
`auto`	キーワード	新しいスタックコンテキストを作成しない。
`<integer>`	タイプ	整数のスタック順序。値が大きいほど上に描画される。

▶ 例

以下のコードを編集して、プレイグラウンドでライブ結果を確認してください：

▶ 試す

🌐 ブラウザーサポート

ブラウザー	Chrome	Edge	Firefox	Safari	Opera
z-index	✓ v1	✓ v12	✓ v1	✓ v1	✓ v1
すべての主要ブラウザーでサポート

注意： z-index が影響するのは position が static 以外の要素だけです。通常フローにある要素に設定しても効果はありません。

重要： z-index の比較は、同じスタックコンテキスト内でのみ有効です。異なるスタックコンテキスト間の値は直接比較できず、子要素の z-index が親のスタックコンテキストの境界を超えることもありません。

❓ よくある質問

Qz-index はどのくらいの値にすればよいですか？

A多くのビジネス用途では 1〜10 でほぼ足ります。大規模なプロジェクトでは 1000 や 9999 のような round number（千単位）を使い、モーダルは 9999、オーバーレイは 1000 にすることが多いです。999999 のような極端な値を乱用しないでください。複数のコンポーネントが z-index を大きくして競うようになると、数値が制御不能になり保守できなくなります。z-index は小さな範囲に収め、変数や規約で階層を管理するのが望ましいです。

Qz-index が効かないのはなぜですか？

Aよくある原因は 3 つあります。1 つ目は要素に position がないことです（z-index は配置された要素や flex/grid アイテムにしか効きません）。2 つ目は、親が opacity が 1 未満、transform、filter などによってスタックコンテキストを作っており、子の z-index がその中に閉じ込められていること。3 つ目は、2 つの要素が同じスタックコンテキストになく共通の親も持たないため比較できないこと。この順で調査してください。

Qスタックコンテキストとは何ですか？

Aスタックコンテキストとは、重なり順を孤立させた領域です。z-index の順序付けはその領域内でのみ有効です。これは、position が指定され z-index が auto 以外の要素、opacity が 1 未満、transform、filter などによって作成されます。子の z-index が親のスタックコンテキストの境界を越えることは決してなく、それがモーダルが背景（backdrop）を覆えない原因になることがよくあります。修正方法は通常、重なる要素をそのコンテキストの外に出すことです。

Qz-index は配置された要素にしか効きませんか？

A従来はそうです。z-index は配置された要素（relative・absolute・fixed・sticky）に適用されます。ただし flex や grid レイアウトでは、配置されていなくてもアイテムが z-index で視覚的な順序を制御できます。配置されていない通常フローの要素は z-index で並び替えできないため、普通の要素を階層化したい場合はまず position:relative を追加してください。これはレイアウト上のコストはなく、z-index を有効にします。