CSSのz-indexが効かない原因と対処法

CSSのz-indexは、要素の重なり順を指定するプロパティです。しかし、数値を大きくしても前面に表示されないことがあります。

この記事では、z-indexが効かない主な原因と、その対処法を紹介します。

1. positionが指定されていない

z-indexが効かないときに、まず確認したいのがpositionプロパティです。

通常、position: static（初期値）の要素には、z-indexを指定しても基本的に効果がありません。

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

position: relativeなどを指定することで、z-indexが機能するようになります。

ただし、FlexboxやGridの子要素など、positionを指定しなくてもz-indexが有効になる例外もあります。

2. 親要素の重なり順が影響している

z-indexは、数値が大きいほど必ず前面に表示されるわけではありません。親要素の重なり順が影響する場合があります。

例えば、次のようなコードです。

<div class="parent-a">
  <div class="box-a">A</div>
</div>

<div class="parent-b">
  <div class="box-b">B</div>
</div>

.parent-a {
  position: relative;
  z-index: 1;
}

.parent-b {
  position: relative;
  z-index: 2;
}

.box-a {
  position: relative;
  z-index: 999;
}

.box-b {
  position: relative;
  z-index: 1;
}

この場合、box-aのz-indexは999ですが、親要素の.parent-aが.parent-bより後ろにあるため、box-aを.box-bより前面に表示することはできません。

このように、子要素のz-indexだけでなく、親要素同士の重なり順も確認する必要があります。

3. 別のスタッキングコンテキストが作られている

「スタッキングコンテキスト」とは、要素の重なり順を判断するための独立したまとまりです。

次のようなプロパティなどによって、新しいスタッキングコンテキストが作られることがあります。

• positionとz-indexの組み合わせ
• opacityが1未満
• transformがnone以外
• isolation: isolate

例えば、親要素にtransformが指定されている場合、その内部の要素は独立した重なり順のルールに従います。

そのため、子要素のz-indexを大きくしても、別のスタッキングコンテキストに属する要素より前面に表示できないことがあります。

4. z-indexの数値が足りないと思い込んでいる

z-index: 9999のように大きな数値を指定しても、問題が解決するとは限りません。

.modal {
  position: relative;
  z-index: 9999;
}

この指定でも前面に表示されない場合は、数値をさらに大きくするのではなく、親要素やスタッキングコンテキストの構造を確認しましょう。

むやみに数値を大きくすると、CSSの管理が難しくなる原因にもなります。

5. 親要素のoverflowで隠れている

z-indexが正しく設定されていても、親要素にoverflow: hiddenが指定されていると、領域からはみ出した部分が隠れることがあります。

.parent {
  overflow: hidden;
}

この場合、子要素のz-indexを大きくするだけでは、隠れた部分を表示できないことがあります。

ドロップダウンメニューなどが途中で切れてしまう場合は、親要素のoverflowの指定も確認しましょう。

まとめ

z-indexが効かない場合は、数値を大きくする前に、次のポイントを確認しましょう。

• positionなど、z-indexが有効になる条件を満たしているか
• 親要素同士のz-indexが影響していないか
• スタッキングコンテキストが作られていないか
• 親要素のoverflowによって隠れていないか

z-indexは単純に数値だけで重なり順が決まるものではありません。要素同士の親子関係や、重なり順を決める仕組みを理解することが、問題を解決するポイントです。