【CSS】z-indexの使い方を理解しよう！

こんちには！
フロントエンドエンジニア・マークアップエンジニアのリクです！

今回は、z-indexについて解説していきます。

z-indexを使用していて、うまく効いてなかったり、そもそも仕組みを理解できていない…なんてお悩みはないでしょうか？

上記のように、疑問に思っていることを解決できる記事となっています。

僕は、フロントエンドエンジニア・マークアップエンジニアとして、主にWebサイトを作成しています。Webサイトを作成する際に、z-indexは必要不可欠なプロパティです。

なぜか効かない時があったり、値の指定方法を理解できていない方も多いかと思います。

僕はこの記事を書くまで、ハッキリと説明できるほど理解できていませんでした…恥ずかしいです…(笑)

ここでは、z-indexについて分かりやすく解説していこうと思います！

1 z-indexとは？

z-indexとは、結論から言いますと、要素の重なりを指定するCSSのプロパティになります。

Webサイトは1枚のページでできているようにも見えますが、実際にはいくつもの層（レイヤー）から構築されており、それぞれ重なっている状態になります。

例えば、画像と文字を重ねて表示させたい場合、画像と文字のどちらを前面に表示させ、どちらを背面に表示させるのか重なる順番を決めるためにz-indexプロパティが必要になります。

z-indeの書き方は下記のようになります。

.box { z-index: 10; }
.box { z-index: 20; }

box1、box2の部分はHTMLで書いた要素（セレクタ）を指定します。

また、boxの前にある「.」はクラス属性を指します。

※HTMLについては、こちらの記事「【初心者向け】HTMLとは？HTMLの書き方」を読んでみてください。

z-indexではかなり幅広い値を指定することができます。

※整数のみで、小数点は使用できません。

z-indexで指定した値の数字が大きいほど上に表示されるようになっています。なので、上記のbox1、box2の図で言いますと、box2の方が上に表示されます。

マイナスの値で指定することも可能で、基本的に何も指定されていない場合は、z-index:0になっています。マイナスで指定した要素は、何も指定されていない要素よりも下に表示されることになります。

ここまで、z-indexについて簡単に理解できたかと思います。

次は、z-indexを実際に書けるよう、使い方を理解した上で実践できるようにしましょう！

※こちらのURLも参考に見るとわかりやすいと思います。「z-index-CSS:カスケーディングスタイルシート」

そもそも、「z-indexを実際に使用するシーンはいつなの？」という疑問が浮かぶかと思います。

z-indexの使用シーンにつきましては、CSSのプロパティ「position」などで、要素を重ねた時の順番を指定する際に使用します。

例えば、Webサイトのヘッダーメニューをスクロールして追従させるシーンや、画像要素の上に文字要素を重ねるシーンでも使用します。

僕もたまにありますが、「あれ？z-indexが効いていない…」なんてことが時々あります。

「どうして効かないんだ！」と思いながら、値を999に変えたりなど、色々と試した時もありました。

実は、z-indexが適用されるには条件があります。

まずは、要素に「positon」が指定されていないと、z-indexは効きません。

z-indexが効くためには、スタックコンテキストと言い、positionとz-indexが指定されている要素の状態で効きます。なので、position + z-indexでは無い状態では、z-indexを指定しても要素の重なり順を指定することはできないということです。

対処法としては、z-indexを指定したい要素のpositionを「relative」、「absolute」、「fixed」のどれかを状況に応じて指定するだけです。

positionの初期値は「static」です。staticではz-indexを指定できません。

z-indexが効かない場合は、まず上記を疑ってみましょう。

今回はz-indexについて、解説してきました！

複雑なWebサイトを作成する時に、要素の重なり順を指定することがよくあります。

フロントエンジニアの方や、Webサイトを作成したいと思っている方にとっては必須の知識となりますので、positionプロパティと一緒に覚えておきましょう！