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でどうやればいいのか? と疑問に思ってませんか?   この記事では、cssを使い、 1行だけ字下げ、複数行を字下げする方法を、 書 …

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

cssの書き方をまとめました「よく使う内容を網羅」

どうも、チャーさんです。 あなたはcssの書き方について、 網羅的に知りたいですか?   この記事ではcssの書き方について、 よく使われるものについてまとめてみました。   なの …

no image

cssの読み込み方法を3つ紹介「どれも簡単です」

どうも、チャーさん(@chaa___san)です。   あなたはcssの読み込み方法がわからず、 困っていますか?   この記事ではcssの読み込み方法を3つ紹介してます。 なので …

no image

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

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

no image

コーダーになるにはこの5つのステップを踏みましょう

どうも、チャーさんです。   あなたはコーダーになるには、 どうすれば、どんな手順を踏めばなれるのかな、 と思ってませんか?   この記事では完全に0から、 コーダーになるそのため …

no image

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

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

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

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

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

no image

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

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

no image

cssで背景色をつける方法とコードの書き方

  どうも、チャーさん(@chaa___san)です。   あなたはcssで背景色をつけたいんだけど、 どうすればいいかわからない。   そう思っていませんか? &nbs …

max-widthとmin-widthの違いについてわかりやすく説明します

  あなたはmax-widthとmin-widthの 違いについて疑問を持ってますか?   この記事では、max-widthとmin-width の違いを説明してるので、これを読め …

no image

見出しに横線をつける方法「webページ制作に便利」

どうも、チャーさんです。   あなたは見出しの横に、横線を表示させたい。 そう思っていませんか?   この記事では、見出しに横線をつける方法を、 書いています。(以下のようなのがで …

no image

cssで平行四辺形を作る方法「1行足せばできますよ」

どうも、チャーさんです。   あなたは、cssで平行四辺形に できないものかと思っていませんか?   この記事では、要素をcssで平行四辺形に する方法を書いています。 &nbsp …

no image

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

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

最新記事

チャーさん

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

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

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