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関係


スポンサードサーチ

関連記事

cssで上下左右に中央寄せする簡単で便利な方法

どうも、チャーさんです。   あなたはcssで上下左右、両方とも 中央寄せしたいと思っていませんか?   左右ならtext-alignやmargin:autoで できるけど上下って …

no image

cssで背景画像をレスポンシブ対応させる方法「1行記述すればok」

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

no image

cssで文字を回転させる方法「10秒以内にできます」

どうも、チャーさんです。 あなたはcssで文字を回転させたい、 そう思っていませんか?   この記事では、cssで文字を 回転させる方法を書いています。   なので、あなたがこの記 …

no image

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

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

no image

liタグのメニューにアイコンを表示させる方法(コード例つき)

どうもチャーさんです。   あなたはliタグで作ったメニューに、 アイコンを表示させたいと思っていませんか?   この記事では、liタグのメニューに アイコンを表示させる方法を書い …

no image

webページのコーディングを効率化し3分の1の時間で制作する方法

どうも、チャーさんです。   あなたはwebページのコーディングを、 効率的にしたいと思っていませんか?   1ページ作るのに10時間とかかかって、 困ってる、という状態ではありま …

no image

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

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

no image

ブートストラップを使う利点をわかりやすく説明します。習得方法も紹介。

  どうもチャーさんです。   あなたはブートストラップを使う利点は、 何だろうと思っていませんか?   css使えばデザインなんてできる、 何でわざわざブートストラップ …

no image

cssでテーブルをレスポンシブの縦並びにする方法

どうも、チャーさんです。   あなたはcssでテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

cssで見出しに画像を表示させる方法「簡単にできる」

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

no image

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

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

no image

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

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

no image

cssを最初の要素にのみ適用する方法

どうも、チャーさんです。   あなたはcssを最初の要素にのみ、 適用させたいがどうしたらいいか悩んでませんか?   この記事では、cssを最初の要素にのみ、 適用させれる方法を紹 …

no image

コーダーの仕事内容をわかりやすく紹介します。

どうもチャーさんです。   あなたはコーダーの仕事内容って、 どんなだろう? と思っていませんか。   またコーダーって具体的にどんなことをやってるんだろう? と疑問に思っていませ …

no image

cssの書き方で大なりと書くとどうなるか知りたいならこの記事。

どうも、チャーさんです。   あなたはcssの書き方で大なり (例 .class > p )のように書くと、 どう動くのか疑問に思ってませんか?   この記事では、大なりで書 …

最新記事

チャーさん

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

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

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