【HTML/CSS】z-indexで重なり順を指定。効かない時の対処法はコレ！

2020年12月6日

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

この記事はこんな方におすすめ

今回は、HTML/CSSで要素の重なり順を指定する方法として、CSSプロパティz-indexについて初心者の方でも分かりやすく解説します。

設定しても上手く効かない時の対処法も紹介しています。

CSSプロパティのz-indexとは？

z-indexは、要素の重なり順を指定するためのプロパティです。

基本構文は以下のように記述しましょう。

基本的な構文

セレクタ {
z-index: 数字;
}

「position: absolute;」や「position: fixed;」で要素が重なっている時などに使うことが多いです。

「要素が重なって表示される時に使うもの」と理解しておきましょう。

3つの重なった要素を作って、その順番をz-indexで指定してみましょう。

See the Pen z-index by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

このように指定なしの場合、後に書かれた要素が順番に上に重なってきます。

See the Pen z-index by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

今回は「第1要素には20、第2要素に30、第3要素に10」を指定しました。

第2要素のz-indexの値が一番大きいので一番前に表示されていますね。

z-indexが効かない時に一番よくありがちなのは「position: staticの要素」が原因となっていることです。

ポイント

positionプロパティの初期値であるstaticではz-indexを指定できません。

positionの指定がされていない場合には、初期値のstaticが設定されてしまいます。

その状態だと、いくらz-indexを設定しようと効かないことになりますので、注意してください。

z-indexが効かない時の対処法

z-indexを指定したい要素にpositionを「relative、absolute、fixed」のどれかを設定するだけ。

positionの変更で要素の位置が変わってしまうのが嫌な場合は、「position:relative」にするようにしましょう。