コーディング犬に聞く：「z-indexがきかない時どうする？」

z-indexは、要素の重なり順を決めるためのCSSです。ただし、数字を大きくすれば必ず前に出る、という単純な仕組みではありません。

よくある原因は、positionが指定されていないこと、親要素の重なり順に制限されていること、別の重なりのグループに入っていることです。

最初に見るのはpositionです。z-indexは、基本的にpositionがrelative、absolute、fixed、stickyなどの要素で効きます。

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

z-indexだけを書いて効かない時は、positionが抜けていないかを確認しましょう。

親要素の影響を疑います。子要素にz-index: 9999を指定しても、
親要素そのものが後ろにあれば、子要素だけ前に出ることはできません。

この場合は、前に出したい要素だけでなく、その親要素のpositionやz-indexも確認します。
特にヘッダー、メニュー、モーダルで起こりやすいです。

stacking contextは、重なり順を管理する小さなグループのようなものです。
グループが違うと、z-indexの数字だけでは比較できない場合があります。

transform、opacity、filter、positionとz-indexの組み合わせなどで、
新しいstacking contextが作られることがあります。

初心者のうちは「親要素が別の重なりグループを作っていないか」と考えるだけで十分です。

固定ヘッダーはposition: fixedを使うことが多く、他の要素より前に出したい場面が多いです。

その場合は、ヘッダーに明確なz-indexを指定します。
ただし、むやみに大きな数字を使うより、サイト内でルールを決めるのがおすすめです。

.site-header {
  position: fixed;
  z-index: 100;
}

モーダルやポップアップは、ページ全体より前に表示したい要素です。
親要素の中に閉じ込めるより、body直下に近い位置へ置くと管理しやすくなります。

背景のオーバーレイとモーダル本体にも、順番が分かるz-indexを指定しましょう。

.overlay { z-index: 1000; }
.modal { z-index: 1001; }