---
title: "z-indexとは？要素の重なり順を決めるCSSの基礎"
description: "メニューが隠れる・モーダルが後ろに回り込む――重なり順のトラブルに悩む人向けに、z-indexが効く条件と効かない理由を整理。stacking contextの概念まで踏み込み、根本から問題を解決できるようになります。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/z-index-term"
markdown: "https://giga-site.com/articles/z-index-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# z-indexとは？要素の重なり順を決めるCSSの基礎

メニューが他の要素に隠れる、モーダルが背景の下にもぐる。こうした重なりのトラブルを解決する鍵がz-indexです。数値で前後関係を指定する仕組みですが、効かせるには条件があります。基礎と落とし穴をまとめて理解しましょう。

> Source HTML: https://giga-site.com/articles/z-index-term
> Article index: https://giga-site.com/articles/index.md

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

## よくある質問

### z-indexを指定したのに効かないのはなぜですか？

対象の要素にpositionが指定されていないと、z-indexが反映されないことがあります。relativeやabsoluteなどで位置の基準を与えたうえで数値を指定してください。位置指定とセットで使うのが基本です。

### 数値を大きくすれば必ず前面に出ますか？

必ずしも出ません。親要素が独立した重なり文脈を作っている場合、子要素の数値をいくら大きくしても親の順位は超えられません。要素単体だけでなく、親の状態まで確認する必要があります。

### 重なり文脈とは何ですか？

特定の条件を満たす親要素が作る独立した重なりのグループです。その中の子要素のz-indexは、グループ外の要素とは直接比べられません。効かない原因の多くはこの仕組みに関係しています。

### z-indexの数値はどう決めればよいですか？

数値は相対的な大小だけが意味を持つので連番である必要はありません。ヘッダーやモーダルなどレイヤーごとに大まかな段階を決めておくと、全体の重なり方針が一貫し、後の管理が楽になります。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [CSSセレクタとは？要素を狙ってスタイルを当てる基礎](https://giga-site.com/articles/css-selector-term/index.md)
- [CSSのpositionとは？static・relative・absolute・fixedの違い](https://giga-site.com/articles/css-position-term/index.md)
- [CSSカスタムプロパティ（変数）とは？色やサイズを使い回す仕組み](https://giga-site.com/articles/css-variables-term/index.md)
- [重なり順（z-index）が効かず要素が隠れるときの原因と対処](https://giga-site.com/articles/z-index-stacking-broken/index.md)
- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "z-indexとは？要素の重なり順を決めるCSSの基礎",
  "description": "メニューが隠れる・モーダルが後ろに回り込む――重なり順のトラブルに悩む人向けに、z-indexが効く条件と効かない理由を整理。stacking contextの概念まで踏み込み、根本から問題を解決できるようになります。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/z-index-term",
  "url": "https://giga-site.com/articles/z-index-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "z-indexを指定したのに効かないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "対象の要素にpositionが指定されていないと、z-indexが反映されないことがあります。relativeやabsoluteなどで位置の基準を与えたうえで数値を指定してください。位置指定とセットで使うのが基本です。"
      }
    },
    {
      "@type": "Question",
      "name": "数値を大きくすれば必ず前面に出ますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "必ずしも出ません。親要素が独立した重なり文脈を作っている場合、子要素の数値をいくら大きくしても親の順位は超えられません。要素単体だけでなく、親の状態まで確認する必要があります。"
      }
    },
    {
      "@type": "Question",
      "name": "重なり文脈とは何ですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "特定の条件を満たす親要素が作る独立した重なりのグループです。その中の子要素のz-indexは、グループ外の要素とは直接比べられません。効かない原因の多くはこの仕組みに関係しています。"
      }
    },
    {
      "@type": "Question",
      "name": "z-indexの数値はどう決めればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "数値は相対的な大小だけが意味を持つので連番である必要はありません。ヘッダーやモーダルなどレイヤーごとに大まかな段階を決めておくと、全体の重なり方針が一貫し、後の管理が楽になります。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```