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」のどれかを設定するだけ。

 

Kindle Unlimitedで無料で本が読める

 

Kindle Unlimitedを無料で試す

 

なら最初の30日間は無料でコーディング・デザイン・ブログ・英語・Youtubeの参考書・キャリア・副業・マーケティング・漫画・美容知識・雑誌などが読み放題です。

人気の本もあるので是非お試ししてみてください!30日以内に解約すればお金は全くかかりません。

 


最近の投稿

【今すぐ行動しよう】フリーランスエンジニアとブログの相性は抜群!

フリーランスエンジニアがスキルや経験から得たビジネスノウハウを共有する手段として「ブログ」は非常におすすめです。自身のスキルや知識のアウトプットや、実際に自分が経験したことを共有して同じような境遇の人の手助けになるような情報を公開することで自分に帰ってくるメリットは非常に多いです。今回はそのあたりについて紹介していきます。

【経験談】フリーランスのエンジニアは本当に大変なの?安定のコツやポイント

フリーランスのエンジニアは「大変だからやめとけ」という話をよく聞くので、そのことについて現役でフリーランスエンジニアとして生活している私が、その話の実態を解説しようと思います。フリーランスエンジニアの大変なところはもちろんありますが、それ以上にメリットが多いので私個人的には非常におすすめしています。

【幸福度UP】フリーランスエンジニアの「田舎暮らし」実現できます

フリーランスエンジニアとして田舎で暮らす人が増えてるって聞くけど、本当なのかな?どうやったら実現できるのか?今回はフリーランスエンジニアとして田舎で生活をしたいという方向けに、実現可能なのか、実現するにはどうすれば良いのかをご紹介します。

【単価交渉で収入アップ】フリーランスが単価交渉を成功させる4つのポイント

フリーランスが収入をアップさせるための重要な手段のひとつに「単価交渉」があります。今回は、現役でフリーランスとしてエンジニアをしている私が実践して効果のあった単価交渉の方法やコツをご紹介します。

【 今なら無料!】タスク管理ツール「Backlog」を無料で使う方法と手順

今回は、普段のタスク管理からプロジェクトの管理まで幅広く使えるツール「Backlog」を無料で使うための方法とその手段を画像つきで紹介しました。もし気に入らなければ、期間内に解約してしまえば費用はかかりません。また、以外と知られていない「フリープラン」も紹介しているので、是非参考にしてみてください。

Copyright© FUNA BLOG , 2021 All Rights Reserved.