コーディング Web制作 CSS

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

【CSS】要素の重なり順を指定するz-indexの使い方
要素の重なり順を指定するz-indexってどうやって使うの?

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

要素が重なったデザイン

要素が重なったデザイン

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

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

効率よくコーディングしたい人はこちら

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

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

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

.box {
  z-index: 数字;
}

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

z-indexの数値について

・整数:−2147483647(最小値)2147483647(最大値)
・数値が大きいほうが上になる
・初期値:auto(親要素と同じ階層)→ 親要素にz-indexを指定していなければ0

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

まずは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.box03position: absolute;を設定して要素を重ねています。

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

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.

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

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

それではこの状態で.box01z-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が効かなかった.box01position: relative;を追記してみます。

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

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

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

コーディング案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, CSS
-,