まず確認したいポイント

「仕組みはあとでいいので、とりあえず今のz-indexを直したい」という場合は、まず次の4点を確認してみてください。

特にz-index: 9999まで増やしても直らないなら、数字を増やすより、親要素をひとつずつ上へたどるほうが原因を見つけやすいです。

まず確認。z-indexはどうやって重なり順を決める？

z-indexは、要素が重なったときの前後関係を指定するプロパティです。同じ重なりのグループ内なら、基本的には数値が大きい要素が前に表示されます。

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

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

この例ではBがAより前になります。ただし、これは比較する要素が同じstacking contextにいる場合の話です。

z-indexが効かないとき、まず確認したい3つ

.card {
  position: relative;
  overflow: hidden;
}

.tooltip {
  position: absolute;
  z-index: 9999;
}

9999でも効かない原因。stacking contextとは？

stacking context（重ね合わせコンテキスト）は、この記事では「重なり順を比べるグループ」くらいに考えてください。

子の9999が、親の2に勝てないことがある

css Copy

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

.group-a .child {
  position: relative;
  z-index: 9999;
}

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

`.child`の9999は、`.group-a`というstacking contextの中での9999です。外側では`.group-a`の1と`.group-b`の2が比較されるため、子だけを99999にしても逆転できません。

ここだけ覚えても大丈夫です

9999が弱いのではなく、9999が戦っている場所が違います。

知らないうちにstacking contextを作るCSS

stacking contextは、z-indexを書いたときだけ作られるわけではありません。アニメーションや画像調整など、別の目的で書いたCSSが原因になることもあります。

特に見落としやすいのがtransformやopacity: .99です。hoverアニメーションやスライダーを追加したあとに重なりがおかしくなったら、対象要素だけでなく親側も確認します。

position: stickyそのものが効かない場合は、「position: stickyが効かない原因」の記事で確認ポイントをまとめています。

実務でよくある「z-indexが効かない」4パターン

実際の制作では、次の4パターンに当たることが多いです。

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

.main {
  position: relative;
  z-index: 1;
}

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

DevToolsでz-indexが効かない原因を調べる順番

私はz-indexで困ったとき、対象要素だけを眺め続けず、対象から親へ向かって上にたどるようにしています。

1. 前に出したい要素を選ぶ
   Elementsパネルで対象を選び、positionとz-indexの適用状態を確認します。
2. 重なっている相手を確認する
   header、hero、modalなど、何より前に出したいのかを特定します。
3. 関連するCSSを見る
   transform、opacity、filter、isolation、container-type、overflowなどを確認します。
4. 親要素をひとつずつ上へたどる
   親・祖先要素にstacking contextを作る指定がないか確認します。
5. overflowも確認する
   重なりの問題なのか、clippingの問題なのかを切り分けます。
6. 数字ではなく構造を直す
   不要なstacking contextや親のz-index、HTML上の配置を見直します。

直ったあとに。z-indexで困りにくくする3つの考え方

:root {
  --z-header: 10;
  --z-drawer: 20;
  --z-modal: 30;
}

参考情報

今回の記事では、z-index、stacking context、isolation、top layer、Chrome DevToolsのLayersについて、MDN Web DocsとChrome for Developersの情報も確認しています。

• MDN Web Docs「z-index」
• MDN Web Docs「Stacking context」
• MDN Web Docs「isolation」
• MDN Web Docs「Top layer」
• Chrome for Developers「Layers panel」