z-index(重なり順を指定する)

このレッスンでは、CSSのz-indexを使った重なり順の指定方法を学び、要素の重なりトラブルを解決できるようになることを目標にします。「CSS z-index 使い方」で調べている方向けの内容です。

要素どうしが重なるとき、z-indexの数字が大きいほど「上に」表示されます。トランプを積み重ねたときの「一番上のカード」をイメージすると分かりやすいです。positionと組み合わせて使います。

サンプルコードでは、.box-aにz-index: 1;、.box-bにz-index: 2;を指定し、数字の大きい.box-bが上に重なって表示される様子を確認しています。両方ともposition: absoluteを指定していないと、z-indexの効果が正しく現れない点にも注目してみましょう。

初心者がよくつまずくのが、z-indexはpositionがstatic(初期値)のままだと効果を発揮しない点です。relative・absolute・fixed・stickyのいずれかを指定した要素にしか、z-indexは適用されません。

ポップアップウィンドウやメニューが他の要素の裏に隠れてしまうトラブルは、Web制作でよくつまずくポイントです。z-indexの仕組みを理解しておくと、こうした「重なり順」の問題を落ち着いて解決できるようになります。