こんにちは！デザイナーのasaです。
CSSで要素の重なり順をコントロールできるプロパティ「z-index」。ウェブサイトのデザインで要素がうまく重ならないと、思わぬ表示崩れが起きることもあります。このz-indexを理解し、正しく使えるようになれば、スムーズに重なり順を制御できるようになります。今回はz-indexの使い方や注意点、そして思わぬトラブルの対処法について解説していきます。

z-indexの使い方

z-indexは、CSSで要素の「重なり順」を指定するためのプロパティです。z-indexの値を大きくすると上に表示され、小さくすると下に表示される仕組みになっています。主なポイントは以下の通りです。

ポイント

位置指定（position）が必要

数値で指定

正の値と負の値で指定可能

位置指定（position）

z-indexはpositionプロパティが設定されている要素に対して機能します。positionには、relative、absolute、fixed、stickyなどが使えますが、初期値であるstaticでは機能しないので注意してください。
positionについての詳しい解説はこちらをご覧ください。

2024-11-08

【CSS】position完全ガイド｜種類・使い方・注意点を徹底解説！

数値で指定

z-indexは数値が指定でき、値の大きい方が上に表示されます。例えば、z-index: 10;とすれば、z-indexが5の要素よりも上に表示されます。
指定できる数値は最小値-2147483647から最大値2147483647までとなります。

正の値と負の値

z-indexでは正の値、負の値どちらも設定できます。負の値を設定すると、その要素は他の要素の後ろに隠れます。
また小数点は指定できないので、必ず整数で指定するようにしましょう。

基本的な書き方

.box1 {
  position: relative;
  z-index: -1;
}
.box2 {
  position: relative;
  z-index: 1;
}

この例では、.box2が.box1よりも前面に表示されます。

z-indexの注意点

z-indexの使い方自体はシンプルですが、思わぬ表示の問題が発生することもあります。以下の注意点を押さえておきましょう。

親要素のz-indexが影響する

子要素にz-indexを指定しても、親要素が持つz-indexの範囲内での重なり順に影響されます。

z-indexの数字だけ見るとA > C > Bとなっています。しかしBとCが兄弟要素となっており、Cの方が数値が大きくBより上に来ています。その場合いくらBの中にあるAの数値を大きくしても、Cよりも上に来ることはありません。なぜならAはBの範囲内だけでの重なり順になるからです。

スタッキングコンテキストの理解

もう一つ大事なのはスタッキングコンテキストに対する理解です。スタッキングコンテキストとはz-index同士で重なり順を争うフィールドのようなものです。

先ほどとは違いBにz-indexを指定していません。そうするとBはスタッキングコンテキストが生成されず、AとCが同じスタックとなるためAが上に表示されます。
このように重なり順は必ずしも兄弟要素同士ではなく、同じスタック同士間でおこることを覚えておきましょう。

スタッキングコンテキストが生成される条件

positionがrelativeもしくはabsoluteで、かつz-indexがauto以外

positionがfixedもしくはsticky

flexもしくはgridコンテナの子要素で、かつz-indexがauto以外

opacityの値が1以外

toransform、filter、backdrop-filter、perspective、clip-path、maskの値がnone以

などです。
z-indexがauto以外とありますが、z-indexの初期値は0ではなくautoです。なのでrelative、absoluteの場合はz-indexの指定がないとスタッキングコンテキストが生成されません。
それに対しfixed、stickyはz-indexの有無にかかわらずスタッキングコンテキストが生成されるのはちょっと面白いですね。
他にも条件はあるので気になる方はMDNなどで調べてみてください。

z-indexの乱用を避ける

z-indexの値をむやみに高くしたり無意味に多く設定すると、コードが複雑になります。なるべく必要最小限の値を設定し、重なり順が見やすいように工夫するのがポイントです。

z-indexで重なり順がうまくいかない時の対処法

z-indexを設定しても、期待通りに要素が重ならない時の対処法をご紹介します。

positionプロパティを確認する

positionがstatic（初期値）だと、z-indexは機能しません。指定し忘れていないか確認し、relativeやabsoluteに設定しましょう。

スタッキングコンテキストをチェックする

先述したスタッキングコンテキストが影響していないかを確認することも大切です。親要素に新たなスタッキングコンテキストが発生している場合、z-indexが期待通りに動かない可能性があります。スタッキングコンテキストを理解して、z-indexを指定したい要素の親要素を確認しましょう。

他の要素のz-index値を確認する

z-indexの値がどのように設定されているかを見直し、意図せず値がかぶっていないかチェックしてみましょう。特に0や1が多く設定されることが多いので、優先したい要素のz-indexを少しだけ大きめにするなどの工夫が役立ちます。

まとめ

z-indexはCSSにおける重なり順を制御する便利なプロパティですが、その挙動を正しく理解することで、意図通りのレイアウトが実現しやすくなります。ここでは、z-indexの基本的な使い方から注意点、トラブル解決法までを紹介しました。
z-indexの正しい使い方を身に付けることで、悩むことなくスムーズにデザイン作業を進められるようになるでしょう。

また弊社ではWEBやDTPの制作からマーケティングまでワンストップで対応していますので、お気軽にお問い合わせください。