css cssのposition関係

z-indexが効かない場合の解決法(relativeつけたのに効かない場合)

投稿日:2019年6月8日 更新日:

Pocket

  

うもチャーさんです。

 

あなたはz-indexが効かないと困っていませんか?

ちゃんとrelativeもつけてるのに、

なぜ効かないんだと悩んでいませんか?

 

この記事では、relativeをつけても、

z-indexが効かない場合の解決策を書いてます。

 

 

なので、relativeをつけたのに、

z-indexが効かないと悩んでいるあなたの、

疑問がこの記事を読めば解決されるでしょう。

 

ということで、あなたがz-indexが効かない、

と悩んでいるのならば、このまま下にスクロールして、

読んでみてください。

 

スポンサードサーチ

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

 

ということで、結論からいきます。

 

relativeをちゃんとつけたのに、

z-indexが効かない場合は、

親要素にz-indexをつけず子要素につけましょう。

 

 

大事なことなのでもう一度、

親要素でなく子要素にz-indexをつけましょう。

 

上記の理由を説明します。

 

 

z-indexですが、こちら

親要素につけた場合効かないようになっています。

 

なので、子要素につけましょう。

というわけです。

 

とゆうことで、早速具体例をみてみましょう。

 

 

以下の画像は具体例用のhtmlのコードです。

 

 

oyaというクラスのついたdiv(親要素の中に)

divのボックスが3つ(子要素)入ってる感じです。

 

 

で、後から画像出しますがデザイン的な説明をすると、

このoyaクラスは背景色が黒の、400pxの

一番大きい四角です。

 

なので、このoyaクラス(親要素)にz-indexをつけると、

一番上にきて画面真っ黒になると思いますよね?

 

 

ですが、実際は以下の画像の通り、

cssでoya(親要素のdivタグ)に、

z-indexつけてますが、効いてないですよね。

 

(上にきてないですね。)

 

 

こんな風に、親要素にz-indexをつけても、

効かないので重なり順を変えれないのです。

 

ですが、このz-index、

こちらをこのoyaの親要素の中にある、

子要素たちにつけるとちゃんと効いてくれます。

 

 

なので、このようにz-indexが効かない場合は、

親要素にz-indexをつけてしまっていないか、

それを確認するようにしましょう。

 

ちなみに親要素にz-indexをつけた場合、

どんなに数字を大きくしても上にはきません。

 

 

まぁそもそもz-index自体が親要素につけた場合、

効かないの、子要素達での重なり順をコントロール

するものだと思ってz-indexを使うようにしましょう。

 

 

スポンサードサーチ

z-indexが効かない場合の対処法補足

 

ちなみにz-indexですが、

z-indexをつける要素に、

position:absoluteかrelativeが付いてないと効きません。

 

なので、z-indexを効かせたい場合は、

relativeかabsoluteをつける、その上で

子要素につけるようにしましょう。

 

 

スポンサードサーチ

まとめ

 

z-indexが効かないという場合は、

親要素にz-indexをつけてないか確認しましょう。

 

そして、親要素につけてしまっていたら、

子要素にz-indexをつけるようにしましょう。

 

 

そうしたらちゃんとz-indexが効きますよ。

 

それでは、読んでもらってありがとうございました。

 

チャーさん

 

 

-css, cssのposition関係


スポンサードサーチ

関連記事

no image

cssで画像をトリミングする方法。「記述1行で完了」

どうも、チャーさんです。   あなたはcssで画像をトリミングしたい。 そう思っていませんか?   photoshopでトリミングするのめんどい、 cssでできんかな?と思ってませ …

no image

ブートストラップの使い方を初心者向けに紹介

どうも、チャーさんです。   あなたはブートストラップを使ってみたい、 または使わないといけないけど、 使い方がわからない。   導入の仕方も、何したらいいかもわからない。 そんな …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

コーダーがphotoshopを使えた方がいいのかについて書きます。

どうも、チャーさんです。   あなたはコーダーはphotoshopを、 学んだ方がいいのか?   仕事獲得のためには、コーダーも、 photoshopを使えた方がいいのか? と疑問 …

no image

cssでボタンにhoverした時に色を変える方法

どうもチャーさんです。   あなたは、cssでボタンにhoverして、 色を変える方法を探していますか?   この記事では、ボタンホバーで、 ボタンの色を変える方法について、 お話 …

no image

cssで追随させる方法、スクロールしてもついてくるよ

  どうも、チャーさんです。   あなたは、cssでサイドバーなどを、 追随させる方法を知りたいと思っていませんか?     この記事では、スクロールしても、 …

no image

cssで画像を丸くする方法「15秒以内にできます」

どうも、チャーさんです。   あなたはcssで画像を丸くしたい、 そう思っていませんか?   この記事では、cssで画像を丸くする方法を、 書いています。   &nbsp …

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

cssで文章を省略する方法。コピペでok

どうもチャーさんです。   あなたはcssで文章を省略したいと、 思っていませんか?   この記事では、cssを使い、 文章を省略する方法を書いています。   &nbsp …

no image

position:absoluteがレスポンシブでずれるのを解決する簡単な方法

どうも、チャーさんです。   あなたはposition:absoluteが、 レスポンシブにすると、ずれるということで、 困っていませんか?   画面サイズを変えるだけで、 位置が …

no image

liタグを横並びにする方法。この方法なら15秒でできますよ。

どうも、チャーさんです。   あなたがliタグを横並びにしたい、 そう思っていませんか?     この記事では、liタグを横並びにする方法を、 書いています。 &nbsp …

no image

cssで文字色をつける方法とコードを紹介

どうも、チャーさん(@chaa___san)です。   あなたはcssで文字色を変えたい。 そう思っていませんか?   この記事では、cssで文字色をつける方法を、 まとめましたの …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

字下げをcssでやる方法。1行だけ、複数行の字下げも対応

どうもチャーさんです。   あなたは字下げをcssでどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

レスポンシブデザインを3秒で確認できる方法「各サイズ」

どうも、チャーさんです。   あなたは、レスポンシブデザインの確認方法を、 探していませんか?   この記事では、レスポンシブデザインを、 スマホサイズ、タブレットサイズ、pcサイ …

最新記事

チャーさん

プログラミング・筋トレ・unity系の記事などを書いてます。

大学卒業後→開業→個人事業主7年目ぐらいです。webサイト制作したり、unityでゲーム開発しております。

youtubeもやってまして、主にプログラミング動画とかunity系の動画をあげてるので見てください。