【徹底解説】CSSの z-index が効かない原因3選！意外な落とし穴と解決策

ニャンコ

z-indexで重なり順を指定してるのに、ぜんぜん効かないよ

z-indexを効かせるには、z-indexの仕組みと特徴を理解すれば大丈夫だよ。

ワンコ

CSSで z-index を設定したのに「なぜか要素が前面に来ない」「意図した順番にならない」と悩んだことはありませんか？
この問題は z-indexの仕組み を正しく理解すれば、すぐに解決できます！

本記事では、「z-indexが効かない6つの原因」 と 「具体的な解決策」 をわかりやすく解説します。
また、Chrome DevToolsを使ったデバッグ方法 や CSS設計のコツ までカバーしているので、ぜひ参考にしてください！

z-indexとは？基本概念をおさらい

z-index は、要素の重なり順（Z軸方向の順番）を制御するプロパティ です。
しかし、特定の条件下でしか機能しない ため、正しく設定しないと「効かない」と感じることがあります。

まずは、z-indexが効くための前提条件を確認しましょう。

【z-indexが機能する条件】

• position: relative;、absolute;、fixed; などが適用されている
• stacking context（積み重なりのルール） を正しく理解している

では、具体的にz-indexが効かないケースを見ていきましょう！

z-indexが効かない3つの原因と解決策

① position が static のままになっている

まず確認してもらいたいのがこちらです。
ｚ－index が使用できるのは、 position要素の下記が指定されている要素になります。

• position: relative;
• position: absolute;
• position: fixed;
• position: sticky;

試しに下記の４つのブロックをご覧ください。

４つのブロックには上からそれぞれ、sticky、absolute、relative、fixedを指定しています。
しっかり、想定通りの順番に並んでますね。

<p class="Z-index4">z-index4</p>
<p class="Z-index3">z-index3</p>
<p class="Z-index2">z-index2</p>
<p class="Z-index1">z-index1</p>

/* それぞれのブロックのスタイル（見た目に関してのスタイルは省略） */
.Z-index4 {
  position: sticky;
  z-index: 4;
}
.Z-index3 {
  z-index: 3;
  position: absolute;
}
.Z-index2 {
  z-index: 2;
  position: fixed;
}
.Z-index1 {
  z-index: 1;
  position: relative;
}

ここで、一番上になっている「Z-index4」ブロックの「position」を削除してみます。

/* position: sticky;を削除 */
.Z-index4 {
  z-index: 4;
}

その結果がこちら。

ニャンコ

positionを削除した、「z-index: 4」が下になりました。
このように「z-index」プロパティを効かすには、「position」が必須です。

absoluteやfixedを使用するとレイアウトが崩れてしまう場合は、とりあえず「position: relative;」を指定するといいよ。

ワンコ

② 親要素の z-index が影響している

z-index は、親要素の stacking context によって影響を受けます。
例えば、親要素に z-index: 1; が設定されていると、その子要素が z-index: 9999; でも親要素より前には出られません。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

<div class="Z-index1">
    <div class="Z-index9999">z-index9999</div>
</div>
<div class="Z-index2">z-index2</div>

/* それぞれのブロックのスタイル（見た目に関してのスタイルは省略） */
.Z-index1 {
  position: relative;
  z-index: 1;
}

.Z-index2 {
    z-index: 2;
}

/* z-index9999 が設定されているが、親要素のz-indexが1 */
.Z-index9999 {
    z-index: 9999;
}

ニャンコ

親要素にレベルの低い「z-index」が指定されてるよ。
その場合子要素にレベルの高い「z-index」が指定されていても、親要素より前に来ることはないよ。

z-indexが効かない場合、親要素の「z-index」の値を確認してみよう。

ワンコ

解決策

親要素の影響を受けているため、親要素のz-indexを高い値に設定する、もしくはz-indexを削除することで解決します。

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

/* 親要素のz-indexを削除 */
.Z-index1 {
  position: relative;
　/* z-index:1; */
}

③ stacking context（積層コンテキスト）の影響

Stacking Context（積層コンテキスト） とは、要素の重なり順を管理する「グループ」 のことです。
通常、z-index は数値が大きいほど前に表示されますが、異なる stacking context に属する要素同士では z-index を比較できません。

• stacking context が作られると、その中の要素同士でしか z-index を比較できない
• stacking context の 外の要素とは z-index の比較ができなくなる
• そのため、z-index: 9999; を設定しても、z-index: 1000; の要素の後ろに来ることがある

See the Pen Untitled by kokusyo (@kokusyo) on CodePen.

Stacking Context を作る要素

解決策

stacking context を作らないように transform: none; などを指定する。もしくは、親要素にz-indexを指定しましょう。

.container {
  position: relative;

  /* 親要素にz-indexを指定するか、Stacking Context を作る要素を削除 */
  z-index: 9999;
  /*transform: scale(1);*/ 
}

まとめ

z-index が効かない原因は いくつかの要素が関係している ため、一概に「これが原因！」とは言い切れません。
position の設定ミス、stacking context の影響、transform や opacity による新しいコンテキストの発生など、
さまざまな理由で 意図した順番にならない ことがあります。

もし z-index がうまく機能しないと感じたら、上の記事を参考に、原因を一つずつチェックしてみましょう！ ✅

ニャンコ

効かないあるあるとして、「of-type」が効かない場合の対策もあるよ。
こっちも参考にしてね。