HTML/CSS

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

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

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

 

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

  • 要素の重なりを指定して表示を整えたい
  • CSSプロパティのz-indexで設定しても効かない

 

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

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

 

 

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

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

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

基本的な構文

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

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

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

 

【サンプルコード】CSSプロパティz-indexの使い方

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の値が一番大きいので一番前に表示されていますね。

 

CSSプロパティ「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」にするようにしましょう。

 

z-indexの数に指定できる値

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

 

  • 最小値:-2147483647
  • 最大値:2147483647

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

 

基本的な構文

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

 

ポイント

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

 

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

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


最近の投稿

Copyright© FUNA BLOG , 2021 All Rights Reserved.