CSSのz-indexで要素の重なりを自由に調整する方法

こんにちは!ライターのナナミです。

WEBサイトを作っていて、要素の重なり順を変えたい時ってありますよね。

この画像は前に出したい
逆に後ろに持っていきたい

ということで、今回は要素の重なりを調整できるz-indexについてまとめました!この記事は下記の流れで解説をしていきます。

  • 【基礎】z-indexとは何か
  • 【基礎】z-indexの使い方
  • 【発展】z-indexが効かない時の対処法
  • 【発展】z-indexの使用例

要素の重なりを調整できれば、レイアウトは自由自在!しっかり覚えて、レイアウトの幅を広げていきましょう。

z-indexとは?

z-indexは要素の重なりを決めることができるプロパティです。

zindex0

紙を重ねると下の紙は上の紙に隠れて見えなくなりますよね。WEBサイトの要素も同様に、重なりが上のものが見えている状態になります。

zindex1

この重なっている順番を入れ替えることができるのが、z-indexです。

数値の大きさで重なり順が決まる

z-indexは数値で指定をします。この数値が大きければ手前に、小さければ後ろに要素を配置することができます。手前や後ろになる数値が決まっている訳ではありません。この数値に比べてこちらの方が大きいからという比較による順序づけがされています。

zindex2

赤い箱はz-indexの数値を10に、青い箱は100にしました。青い箱の方がz-indexの数値が大きいので、手前に表示されます。青い箱のz-indexの数値を5に変更してみると…

zindex3

赤い箱の方がz-indexの数値が大きくなるので、赤い箱が手前に表示されます。

positionを指定していないとダメ!

z-indexはpositionを指定していないと使うことができません。しかもposition:static以外、relative、absolute、fixedが指定されている要素にしか使えないのです。

z-indexはpositionとセット。これはかなり重要なので、しっかり覚えておきましょう。

対応ブラウザ

z-indexはオールドブラウザも含めて、全てのブラウザで問題なく動作します。安心して使っちゃいましょう!

z-indexの使い方

z-indexは下記のように記述します。

CSS

数値の部分で重なり順を決めています。大きければ前面に出やすく、小さければ後ろに行きやすいわけです。

この数値はマイナスで指定することもできます。動作はプラスの値と同じなので、指定できる数値の幅が広いと思っていただければ大丈夫です。実際に使ってみると…

zindex1

HTML

CSS

こんな感じで、重なり順を決めることができます。

z-indexが効かない時のチェックポイント

書いてある通りに実装したのに、ちゃんと重なり順の調整ができない…

そんな時には、下記の2点を再確認してみましょう。

positionを指定しているか

前述の通り、z-indexはposition:static以外のpositionプロパティを指定していないと動作しません。重なりを変更したい要素に、きちんとpositionを指定しているかチェックしてみましょう。

前に出したいものの数値の方が大きいか

z-indexは指定した数値が大きいものを手前に配置します。後ろに配置したい要素と手前に出したい要素、それぞれのz-indexの数値を確認してみましょう。手前に出したい要素の方が数値が小さかったら、数値を大きくすれば解決です。

z-indexの使用例

z-indexはpositionとセットなだけあって、とんでもなく相性がいいです。これらを使いこなせば、WEBサイトで色々な見せ方ができます。一例を挙げてみましたので、参考にしてください。

固定ヘッダーを常に最前面に

zindex-ex1

HTML

CSS

ヘッダーが固定になっていると、すぐに他のページへ移動できて便利ですね。スクロールしても他の要素よりも前にあり続けるようにしてあげれば完璧です。

スクロールしたら要素の後ろへ隠す

zindex-ex2

HTML

CSS

スクロールしたらメインビジュアルを後ろに隠すようにしてみました。ただのスクロールよりもちょっと面白い動きになりますね。

配置そのままで重なりだけ調整

zindex-ex3

HTML

CSS

absoluteとかで高さがなくなるのは困るけど、重なりは調整したい…

という時には、relativeを使えばOK!配置に影響を出さず、重なり順だけを変えることができます。

まとめ

いかがでしたか?重なり順を自由に変えられると、見せ方や動きのバリエーションが増えますね。ぜひいろんな使い方をして、素敵で使いやすいWEBサイトを作ってみてください。使う際にはpositionの指定をお忘れなく!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説