【効かない原因はこれ】z-indexが効かない理由と対処法まとめ｜初心者がハマるポイントを解説

「z-indexを指定したのに、思ったとおりに前面に出ない…」 そんな経験をしたWeb制作者・コーダーの方は多いはず。

この記事では、z-indexが効かない原因をケース別に解説し、 初心者がつまずきやすいポイントや実務でよくあるパターンをもとに、 確実に重なり順をコントロールする方法をまとめました。

そもそもz-indexとは？

z-index は、要素の「重なり順」を指定するためのCSSプロパティです。 数値が大きいほど前面に、小さいほど背面に表示されます。

.box {
  position: relative;
  z-index: 10;
}

⚠️ ただし、ある条件を満たしていないと効果が出ません！

【原因1】positionがstaticのまま

.bad-box {
  position: static; /* 初期値 */
  z-index: 9999;
}

この状態では z-index は効きません。

✅ 対処法

position: relative や absolute を指定する必要があります。

.good-box {
  position: relative;
  z-index: 9999;
}

【原因2】親要素のz-indexの影響を受けている

z-indexは親子関係に依存します。 たとえ子要素に大きなz-indexを指定しても、親が小さいと負けることがあります。

<div class="parent-a" style="position: relative; z-index: 1">
  <div class="child-a" style="position: absolute; z-index: 9999"></div>
</div>

<div class="parent-b" style="position: relative; z-index: 100">
  <div class="child-b"></div>
</div>

この場合、.child-a より .parent-b の方が前面に表示されることがあります。

✅ 対処法

• 親要素のz-indexも含めて考えること！
• 必要に応じて position: relative + z-index を親に追加

【原因3】transform, filter, will-change でスタッキングコンテキストが作られている

以下のプロパティがあると、新しいスタッキングコンテキストが生成されるため、z-indexの影響範囲が分断されます。

• transform
• filter
• will-change
• perspective
• opacity（1未満）など

✅ 対処法

• 不要な transform: translateZ(0) などを削除・見直し
• スタッキングコンテキストがどこで切れているかを意識する

【原因4】positionやz-indexが指定されていない

単純に position も z-index も指定していないパターンもよくあります。

/* NG */
.modal {
  background: white;
}

✅ 対処法

.modal {
  position: fixed;
  z-index: 1000;
}

【原因5】overflow: hidden による切り取り

親要素に overflow: hidden があると、子要素が前面に出ようとしても見切れることがあります。

✅ 対処法

• overflow: visible に変更する
• z-index だけではなく、overflow もセットで確認！

よくある実務パターン

まとめ：z-indexが効かないときは「親・position・context」を疑え！

z-indexトラブルの対処ステップ：

1. position が適切か？（staticでは効かない）
2. 親要素の z-index もチェック！
3. transform, opacity, overflow で切れてないか？

レイヤー構造を理解すると、CSSのバグ修正スピードが激変します！