Oops! It appears that you have disabled your Javascript. In order for you to see this page as it is meant to appear, we ask that you please re-enable your Javascript!

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行記述すればok」

どうも、チャーさんです。   あなたはcssで背景画像をレスポンシブ対応させたい、 そう思っていませんか?   この記事では、cssで背景画像を、 レスポンシブ対応させる方法を書い …

no image

cssを動画で学習したいならこの記事をどうぞ

どうも、チャーさんです。 あなたは、cssを始めたい、 で、わかりやすく動画で学習したい、   そう思っていませんか?   この記事では、cssを動画で学習できるよう、 僕がとった …

no image

z-indexが効かない時の簡単な解決策。1行あれを足せば解決ですよ

z index 効かない   どうも、チャーさんです。   あなたはz-indexが効かないと、 困っていませんか?   ページ制作をしてて、 z-indexを書いたのに …

no image

cssスマホサイズ時のレイアウトはこれが良いですよ

どうも、チャーさんです。   あなたはcssを書いていて、 スマホサイズの時のレイアウトを、 どうしたらいいか悩んでいませんか?   この記事では、スマホサイズ時の 良いレイアウト …

no image

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

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

no image

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

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

no image

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

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

no image

プログラミングのdivをわかりやすく説明します。divにcssを適用する方法も

  どうも、チャーさん(@chaa___san) です。   あなたはdivとはなんだ? と思っていませんか。   この記事ではdivとは何か、 そしてどういう風に使えば …

no image

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

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

no image

cssの書き方これらのセレクタを知ってればほぼ困りません

どうも、チャーさんです。   あなたはcssの書き方でセレクタに ついて色々な書きかたがあってよくわかってない、 と感じていませんか?   この記事では様々なセレクタの指定方法を …

no image

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

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

no image

cssの効率的な学習方法を知りたいなら読んでください。

  どうも、チャーさんです。   あなたはcssの学習方法を模索していますか? どうしたらもっと効率よく早く学習し上達できるのか、 その方法を探していますか?   この記 …

no image

cssでドロップダウンメニューを作る方法

どうも、チャーさんです。   あなたはcssでドロップダウンメニューを 作りたいと思っていませんか?   この記事ではjavascriptなどを使わずに htmlとcssのみでドロ …

no image

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

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

no image

デベロッパーツールの使い方を紹介します。「コーダーは知るの推奨です」

どうも、チャーさんです。   あなたはデベロッパーツールって、 どう使ったらいいのか?と思っていませんか。   そもそもどんな使い道があるん? と疑問に思っていませんか。 &nbs …

最新記事

チャーさん

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

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

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