---
title: "重なり順（z-index）が効かず要素が隠れるときの原因と対処"
description: "z-indexに大きな値を入れても要素が前面に出てこないと困っているフロントエンド開発者向け。positionの未指定とstacking contextの境界という根本原因を切り分けて確実に解決できます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/z-index-stacking-broken"
markdown: "https://giga-site.com/articles/z-index-stacking-broken/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# 重なり順（z-index）が効かず要素が隠れるときの原因と対処

z-indexに大きな値を入れたのに要素が前面に出てこない、別の要素に隠れたまま。原因の多くはpositionの指定漏れと、stacking context(重なり文脈)の境界です。この記事ではz-indexが効かない典型を切り分け、確実に重ね順を制御する方法を解説します。

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

## z-indexはpositionが前提

z-indexはpositionがstatic以外(relative、absolute、fixed、sticky)の要素に対してのみ効きます。position:staticのまま(初期値)の要素にz-indexを書いても無視されます。これがz-indexが効かない最も多い原因です。

前面に出したい要素にposition:relativeとz-indexをセットで指定するのが基本です。relativeなら見た目の位置はそのままに重なり順だけ制御できます。

Flexアイテムやgridアイテムは例外的にpositionなしでもz-indexが効きますが、混乱を避けるため明示的にpositionを付けておくと安全です。

## stacking context(重なり文脈)という壁

z-indexの比較は、同じstacking context内でのみ行われます。ある要素が独立した重なり文脈を作っていると、その中の子要素のz-indexがどれだけ大きくても、文脈の外側の要素を越えることはできません。

重なり文脈は、position+z-index指定のほか、opacityが1未満、transform、filter、will-change、isolation:isolateなどでも新たに生成されます。親にこれらが付いていると、子のz-indexが思うように効かない原因になります。

つまり「z-index:9999にしても前に出ない」ときは、その要素が属する重なり文脈の親自体が、競合相手より後ろに置かれていないかを疑う必要があります。

## 症状別チェック表

重なり順（z-index）が効かず要素が隠れるときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

## 原因を切り分ける手順

z-indexの不具合は、文脈の境界を見つけることが鍵です。次の順で確認してください。

1. 対象要素にposition(static以外)が指定されているか確認する
2. 前面に出したい要素と隠す要素が同じ親(同じ重なり文脈)にあるか確認する
3. 親要素にopacity・transform・filterなど文脈を作る指定がないか調べる
4. 文脈を作っている親同士のz-index/出現順を比較する
5. 必要なら親側のz-indexを調整して文脈ごと前面に出す

## transformやopacityが落とし穴になる例

アニメーションのためにtransformを付けたカードや、フェード用にopacityを下げた親の中にあるモーダルやツールチップが、他の要素の下に潜ってしまう例は典型です。子のz-indexを上げても、親の重なり文脈の中での順位しか上がらないためです。

対処は、重ねたい要素をその制約のある親の外(例えばbody直下)に移動するか、親側の重なり順を調整することです。モーダルやドロップダウンをbody直下にポータルとして描画する設計は、この問題を避けるためでもあります。

isolation:isolateを使うと、意図的に重なり文脈を作って影響範囲を閉じ込められます。逆に予期せぬ文脈生成を避けたいなら、transformやopacityを乱用しないことも有効です。

## 重なりの再現を共有して確認する

z-indexの問題は文脈の構造に依存するため、言葉での説明より実際に重なっている状態を共有したほうが早く解決できます。修正前後のHTMLを並べて、どの親が文脈を作っているかを示すと議論が進みます。

再現用のHTMLを同僚や相談先に見せたいときは、ギガサイト便にドロップして発行される共有URLが手軽です。会員登録なしで公開でき、URLのまま中身を差し替えられるので、文脈を変えた検証を繰り返しながら同じリンクで共有できます。一時公開ページはnoindexで検索に出ません。

## よくある質問

### z-indexに大きい値を入れても前に出ません

positionが指定されていないか、別の重なり文脈の中にいる可能性が高いです。positionを付け、親要素がopacityやtransformで文脈を作っていないか確認してください。

### 重なり文脈はどんなときにできますか

position+z-index、opacityが1未満、transform、filter、will-change、isolation:isolateなどで生成されます。これらが付いた親は子の重なり順を閉じ込めます。

### モーダルが他の要素の下に潜ります

transformやopacityを持つ親の中にあると起きやすい問題です。モーダルをbody直下に移動するか、親側の重なり順を調整してください。

### z-indexは負の値も使えますか

使えます。負の値にすると同じ文脈内で背面に回ります。背景的に敷きたい要素を後ろに送るときに使えますが、クリック可否などとの兼ね合いに注意が必要です。

### 原因が分からないときはどこから確認すべきですか？

まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。

## 関連記事

- [z-indexとは？要素の重なり順を決めるCSSの基礎](https://giga-site.com/articles/z-index-term/index.md)
- [スマホだけ表示が崩れるときの原因と直し方](https://giga-site.com/articles/broken-only-on-mobile/index.md)
- [印刷すると崩れる・はみ出すときの対処](https://giga-site.com/articles/print-layout-broken/index.md)
- [position:fixedの要素がずれるときの対処](https://giga-site.com/articles/position-fixed-broken/index.md)
- [文字間隔・両端揃えが崩れて読みにくいときの対処](https://giga-site.com/articles/letter-spacing-justify-broken/index.md)
- [セレクトボックス（プルダウン）の見た目が環境で違うときの対処](https://giga-site.com/articles/select-dropdown-style-broken/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "重なり順（z-index）が効かず要素が隠れるときの原因と対処",
  "description": "z-indexに大きな値を入れても要素が前面に出てこないと困っているフロントエンド開発者向け。positionの未指定とstacking contextの境界という根本原因を切り分けて確実に解決できます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/z-index-stacking-broken",
  "url": "https://giga-site.com/articles/z-index-stacking-broken",
  "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が指定されていないか、別の重なり文脈の中にいる可能性が高いです。positionを付け、親要素がopacityやtransformで文脈を作っていないか確認してください。"
      }
    },
    {
      "@type": "Question",
      "name": "重なり文脈はどんなときにできますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "position+z-index、opacityが1未満、transform、filter、will-change、isolation:isolateなどで生成されます。これらが付いた親は子の重なり順を閉じ込めます。"
      }
    },
    {
      "@type": "Question",
      "name": "モーダルが他の要素の下に潜ります",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "transformやopacityを持つ親の中にあると起きやすい問題です。モーダルをbody直下に移動するか、親側の重なり順を調整してください。"
      }
    },
    {
      "@type": "Question",
      "name": "z-indexは負の値も使えますか",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "使えます。負の値にすると同じ文脈内で背面に回ります。背景的に敷きたい要素を後ろに送るときに使えますが、クリック可否などとの兼ね合いに注意が必要です。"
      }
    },
    {
      "@type": "Question",
      "name": "原因が分からないときはどこから確認すべきですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。"
      }
    }
  ]
}
```