CSSのz-indexが効かない原因と解決方法

デザイン・技術2026年10月30日読了時間：約3分

メニューが画像の下に隠れてしまう。
z-index を大きくしたのに、前に出てこない。
CSSでよくあるつまずきのひとつです。

この記事では、z-index が効かない原因と、解決の方法を解説します。

1.z-indexは、重なりの前後を決める

z-index は、要素が重なったときに、どちらを前に出すかを決めるプロパティです。数字が大きいほど、前に表示されます。

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

ただし、z-index は、どの要素にでも効くわけではありません。効かないときは、次のような原因が考えられます。

原因	解決の方法
position が指定されていない	position: relative などを指定する（Flexbox・Gridの子は例外）
親が、重なりのグループを作っている	親の z-index や、グループを作るプロパティを見直す
比べている相手が違う	同じグループの中で比べているか確かめる

z-index は、position が static（初めの設定）のままの要素には効きません。また、FlexboxやGridの子の要素には、position の指定がなくても効きます。

もうひとつの大きな理由が、「重なりのグループ（スタッキングコンテキスト）」です。ある要素がグループを作ると、その中の子の z-index は、グループの中だけで比べられます。子にどれだけ大きな z-index を指定しても、親のグループごと、ほかの要素の下にあれば、前には出てきません。

z-index は、同じグループの中でしか比べられないことを覚えておきましょう。

z-index に、9999 のような大きな数字を使うと、あとで管理しにくくなります。ヘッダーは 100、モーダルは 200 のように、役割ごとに数字を決めておくと分かりやすくなります。

ブラウザの開発者向けの機能を使うと、要素に指定されている position や z-index を確かめられます。

z-index にマイナスを指定できますか？

できます。背景の飾りを、ほかの要素の後ろに回したいときなどに使います。

大きな数字を指定すれば、必ず前に出ますか？

同じグループの中なら前に出ますが、親のグループが下にあれば、どれだけ大きくしても前には出ません。

スマートフォンでだけ、メニューが隠れます。

スマートフォン用のCSSで、position や transform などが追加されていないか確かめましょう。

どの要素が上に重なっているか分かりません。

ブラウザの開発者向けの機能で、上に重なっている要素を選んで確かめられます。

z-index が効かない原因の多くは、position の指定がないことと、重なりのグループです。

position の使い方は、CSSのpositionプロパティの使い方で解説しています。

要素の重なりや、メニューが隠れる不具合で困っている場合は、浅草Web屋にご相談ください。