【CSS】要素の重なり順を指定するz-indexの使い方

要素の重なり順を指定するz-indexってどうやって使うの？

コーディングのデザインで写真とテキストの要素がずれて重なっている場合があると思います。

要素が重なったデザイン

この場合はテキストが上で画像が下になっていますが、その重なり順を変更したい時にz-indexを使います。

今回はそのz-indexの使い方を解説していきます。

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

要素の重なり順を指定するz-indexの使い方

早速ですがz-indexの書き方を見てみます。

例えば『box』というclass名の要素にz-indexを指定する場合は以下のように書きます。

.box {
  z-index: 数字;
}

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

それでは実際に要素を重ねたものを見てみます。

まずは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;
}
.box02 {
  left: 70px;
  position: absolute;
  top: 70px;
}
.box03 {
  left: 140px;
  position: absolute;
  top: 140px;
}

親要素にposition: relative;を設定し、子要素の.box02と.box03にposition: absolute;を設定して要素を重ねています。

そして.box01は何も設定しないので左上、.box02と.box03はleftとtopを使ってズラしています。

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

z-indexを使わない場合、あとに書いた要素が上に重なっていきます。

まずは.box02を一番上にしてみます。

See the Pen
z-index（BOX02を一番上） by junpei (@junpei-sugiyama)
on CodePen.

これは.box02にz-index: 1;を設定しただけです。

親要素である.containerにはz-indexを指定していないので.box01と.box03のz-indexは0、なので.box02にz-index: 1;に設定するだけで一番数値が大きくなるので一番上にきます。

それではこの状態で.box01にz-index: 2;を設定すれば.box01が一番上に来るでしょうか？

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

.box01が上に来ません・・・

z-indexが効かない原因

z-indexが効かない問題は誰もが通る道ですが、最も多いと思われる原因は『positionがstaticになっている』です。

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

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

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

なのでstatic以外に何かを設定すればOKです。

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

それでは先ほどz-indexが効かなかった.box01にposition: relative;を追記してみます。

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

今度はちゃんと一番上に.box01が来ました。

他にも原因は考えられるので、この方法で解決しない場合はこちらの記事を参照下さい。

z-indexは非常に使う機会が多いので、ぜひ使いこなせるようになっておきましょう。

以上になります。

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