【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だけです。

box01：z-index 1
box02：z-index 3 → 親要素のbox01のz-indexが1なので、box02のz-indexも1
box03：z-index 2

なのでHTMLを変えずに.box02を一番上にしたい場合は、z-indexを以下のように変更すればOKです。

box01：z-index 1 → 3
box02：z-index 3 → 2
box03：z-index 2 → 1

これであれば.box02の親要素である.box01のz-indexが.box03より大きいので、.box02は.box03より上に来ます。

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

原因③：数値が正しくない

z-indexの数値には以下のような決まりがあります。

z-indexの数値について

・整数：−2147483647（最小値）〜2147483647（最大値）
・数値が大きいほうが上になる

最小値と最大値

z-indexには最小値と最大値があります。

そこまで大きな数値を指定することはないと思うので、極端に大きな数値にしなければ大丈夫です。

整数のみ

z-indexは整数のみなので、小数点にすると無効となります。

CSSのプロパティには小数点が使えるものも多いですが、z-indexは使えないので注意しましょう。

また、単位は不要なのでpxなどを付けないようにしましょう。

まとめ

z-indexは数値が大きい方が必ず上に来る・・・という単純なものではなく、いくつものトラップがあるので効かないと思ったらこの記事を思い出してみて下さい。

z-indexが効かない時の対処方法

・positionをstatic以外で設定
・親要素のz-indexが小さくないか確認
・整数かつ単位なしで設定

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！

投げ銭で応援する🐶