Web制作 CSS

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

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

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

要素が重なったデザイン

要素が重なったデザイン

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

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

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

コーディングの時給アップにはこちら!


要素の重なり順を指定する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が来ました。

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

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

続きを見る

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

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, CSS