【CSS】z-indexが効かない主な原因3つとその対処方法

z-indexが効かないけどなんで？？

要素の重なり順を指定するz-indexですが、数値を指定しても順番が変わらないことがあります。

実はこれは誰もが通る道です。

今回はそんな避けては通れないz-indexが効かない問題の対処方法を解説していきます。

z-indexの使い方については以下の記事を参照下さい。

z-indexが効かない主な原因3つとその対処方法

z-indexが効かないケースは主に3つあります。

1つずつ解説していきます。

原因①：positionがstaticになっている

最も多いと思われる原因は『positionがstaticになっている』です。

position: static;なんて設定してないよ

と思うかも知れませんが、positionの初期値はstaticなので何も設定していなければpositionはstaticになっています。

そしてposition: static;にはz-indexが効きません。

例えばこちらのコードで見てみます（背景色やフォントサイズなど重要では無いCSSは省略）

<div class="container">
  <div class="box box01">BOX1</div>
  <div class="box box02">BOX2</div>
  <div class="box box03">BOX3</div>
</div>

.container {
  position: relative;
}
.box01{
  z-index: 3;
}
.box02 {
  left: 70px;
  position: absolute;
  top: 70px;
  z-index: 2;
}
.box03 {
  left: 140px;
  position: absolute;
  top: 140px;
  z-index: 1;
}

それぞれの要素にz-indexを設定して、上から順に.box01、.box02、.box03になるようにしましたが、.box01にはpositionを設定していません。

それではどうなるか見てみます。

See the Pen
z-index（BOX01を一番上：失敗2） by junpei (@junpei-sugiyama)
on CodePen.

z-indexの数値が一番大きい.box01が一番上に来ていません。

原因は先ほど書いたように.box01にpositionを設定していないからです。

つまり.box01のpositionはz-indexが効かない初期値のstaticです。

.box02はposition: absolute;なのでz-indexが効いて.box03より上に来ていますが、.box01にはz-indexは効いていないので一番上に来ていません。

どうすればいいかというと、.box01にz-indexが効くようにpositionを初期値のstatic以外に設定すればOKです。

ただposition: absolute;やposition: fixed;だと位置の絶対値が変わったり固定されてしまうので、position: relative;を使うことが多いと思います。

ということで、上記の.box01にposition: relative;を設定したのがこちらです。

See the Pen
z-index（BOX01を一番上：成功2） by junpei (@junpei-sugiyama)
on CodePen.

ちなみにz-indexを使わない場合は、以下のようにあとに書いた要素が上に重なっていきます。

See the Pen
z-index（未使用） by junpei (@junpei-sugiyama)
on CodePen.

原因②：親要素のz-indexが小さい

次のHTMLはこちらです。

<div class="container">
  <div class="box box01">
    box01
    <div class="box box02">
      box02
    </div>
  </div>
  <div class="box box03">
    box03
  </div>
</div>

今回は.box01の子要素に.box02があります。

そしてCSSはこちらです。

.container {
  position: relative;
}
.box01 {
  position: relative;
  z-index: 1;
}
.box02 {
  left: 70px;
  position: absolute;
  top: 70px;
  z-index: 3;
}
.box03 {
  left: 140px;
  position: absolute;
  top: 140px;
  z-index: 2;
}

z-indexの数値が一番大きいのは.box02なので、.box02が一番上に来る・・・でしょうか？

See the Pen
z-index（BOX01を一番上：失敗3） by junpei (@junpei-sugiyama)
on CodePen.

.box02は一番上には来ていませんね。

原因は『親要素のz-indexが小さいから』です。

今回の場合、.box03のz-indexが2に対して.box02のz-indexは3ですが、.box02の親要素である.box01のz-indexが1だからです。

つまり.box02のz-indexは3ではなく1になり、.box03のz-indexの2より上にはならないということです。

ちょっとややこしいかも知れませんが、見るべきポイントは.box02だけです。