z-indexとは？要素の重なり順を決めるCSSの基礎

z-indexとは何か

z-indexとは、要素が画面の奥行き方向でどの順に重なるかを数値で指定するCSSのプロパティです。数値が大きいほど手前に、小さいほど奥に表示されます。

ページ上では、後から書かれた要素が手前に重なるのが基本ですが、z-indexを使うとこの順序を上書きできます。ヘッダーを常に最前面に置く、メニューを他の上に浮かせるといった制御に使います。

横方向や縦方向の位置とは別に、奥行きの並びだけを扱うのがz-indexの役割です。前後関係を意図通りに整えたいときに欠かせません。

positionとセットで使う

z-indexは、要素にpositionが指定されているときに効きます。配置基準が初期状態のままだと、数値を書いても重なり順に反映されないことがあります。これが効かない原因の代表例です。

そのため重なりを制御したい要素には、relativeやabsoluteなど位置の基準を与えたうえでz-indexを指定します。両者はセットで使うものだと覚えておくと迷いません。

フレックスボックスやグリッドの子要素など、一部の状況では位置指定なしでもz-indexが効く場合があります。基本は位置とセット、と押さえておけば多くのケースに対応できます。

実務ではどこで関係する？

z-indexは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

z-indexについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

• 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
• 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
• 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
• 運用の話: 期限、差し替え、削除、共有メッセージまで決める

重なりを直すときの手順

要素が思った通りに前後しないときは、やみくもに数値を大きくする前に原因を順に確認します。次の手順で整理すると解決が早まります。

1. 重ねたい要素にpositionが指定されているか確認する
2. 指定がなければrelativeなどで位置の基準を与える
3. 前面に出したい要素のz-indexを、隠している要素より大きくする
4. それでも効かないなら親要素が別の重なり文脈を作っていないか調べる
5. 開発者ツールで親子関係とz-indexの値を確認する

重なり文脈という落とし穴

z-indexがうまく効かない大きな原因が、重なり文脈と呼ばれる仕組みです。特定の条件を満たす親要素は独立した重なりのグループを作り、その中の子要素のz-indexは外の要素とは直接比べられなくなります。

つまり子要素にどれだけ大きな数値を付けても、親が作る文脈の順位を超えられないことがあります。要素単体ではなく、親の状態まで見ないと原因がつかめないのはこのためです。

解決には、問題の文脈を作っている親を特定し、その親側の重なり順を調整するか、構造を見直すアプローチが必要です。子の数値だけを上げ続けても解決しない点に注意します。

数値の付け方の考え方

z-indexの数値は連番である必要はなく、あくまで相対的な大小だけが意味を持ちます。極端に大きな値を場当たり的に付けると、後から別の要素を重ねたいときに管理が難しくなります。

ヘッダーやモーダル、通知などレイヤーごとに大まかな段階を決めておくと、全体の重なり方針が一貫します。場面ごとの最大値を把握しておくと衝突を避けやすくなります。

重なりの検証結果を共有する

重なりのトラブルは、実際の画面で確認しながら直すのが確実です。修正した結果を共有してチームに確認してもらいたいとき、ギガサイト便ならHTMLやZIPをドロップするだけで表示できるURLを発行できます。

CDNのエッジ配信で表示が速く、相手の環境でも同じ見た目を素早く確かめてもらえます。公開期限を設定すれば、確認が終わった頃に自動的に閲覧できなくできます。