z-indexを指定しても要素が最前面に来ない

Answers (1)

• Yuki✓ Best answer7/3/2026

  z-indexは単純に「数字が大きい方が勝つ」わけではなく、「同じスタッキングコンテキストの中でだけ」比較される、という点が見落とされがちです。

  親要素にtransform、opacity（1未満）、filterなどのプロパティが指定されていると、その親要素自身が新しいスタッキングコンテキストを作ってしまいます。そうなると、子要素にどれだけ大きいz-indexを指定しても、その数値は「親が作った箱の中」でしか通用せず、兄弟にあたる別のスタッキングコンテキストの要素とは直接比較されなくなります。

  確認手順としては、ブラウザの開発者ツールで、隠れてしまっている要素から親をたどっていき、transformやopacityなどスタッキングコンテキストを生成するプロパティが指定されている要素がないか探してみてください。

  対処法は主に2つです。

  1. 不要にスタッキングコンテキストを作っている親のtransform等を取り除く
  2. 最前面に出したい要素を、問題の親要素の外（DOM構造上、より上位の階層）に移動する

  特にモーダルやドロップダウンメニューを実装するときにこの問題によくぶつかるので、覚えておくと役立ちます。