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が効かない時の簡単な解決策。1行あれを足せば解決ですよ

投稿日:2019年4月27日 更新日:

Pocket

z index 効かない

 

うも、チャーさんです。

 

あなたはz-indexが効かないと、

困っていませんか?

 

ページ制作をしてて、

z-indexを書いたのに思った通りに、

画像が配置されずに困っていませんか。

 

 

この記事では、z-indexが効かない問題を、

解決する方法を書いてます。

 

なのでこの記事を読めば、

あなたはz-indexが効かない問題から、

解放されます。

 

そしてストレスフリーでwebページ制作が、

できるでしょう。

 

スポンサードサーチ

z-indexが効かないを解決する方法はこれ

 

さてそれでは、本題です。

z-indexが効かないことの解決策です。

 

結論からいいまして、解決策は、

positionプロパティを一緒につけることです。

 

なぜならz-indexは単体で書いても効かないからです。

 

 

z-indexを効かすには、効かしたい要素に、

positionプロパティとセットで書く必要があり、

それによって初めてz-indexが機能するのです。

 

というわけで、早速その例をみてみましょう。

 

 

例えば以下の画像では、青色のボックス(.box1)を、

一番前面にしようとz-indexを一番大きな数字にしてます。

 

 

ですが、画像の通り、

一番背面にありますね。

 

この通りz-indexが効かない状態になってます。

 

ですが、この青色のボックス

(クラスで言うと、.box1)に、

positionプロパティをつけると、、

 

 

はい、この通り、一番前面に出てきてくれましたね。

(ちなみにrelativeでもabsoluteでも、

書けばどっちでもz-indexが機能してくれます。)

 

以下の画像のように。

 

 

ということで、

画像をみていただいて、わかったと思いますが、

この通り、z-indexは単体で書いても効かないです。

 

ですが、positionプロパティを一緒にふってやると、

ちゃんとz-indexが機能しまして、

重なり順を指定できるようになります。

 

なので、z-indexが効かない!

って時は、positionプロパティをつけるようにしましょう。

 

スポンサードサーチ

z-indexを効かせる手順

 

で手順ですが、

 

まずは、z-indexを使って、

位置を動かしたい要素を明確にしましょう。

 

理由はこれをしないと、

意図した要素を意図した場所に動かせないからです。

 

 

で次に、要素を明確にしたら、

そこにpositionプロパティと、

z-indexをセットで書きましょう。

 

positionプロパティは、

absoluteとrelativeどっち書いてもz-indexは、

効きます。

 

ですが、absoluteとrelativeでは挙動が違うので、

そこに留意して選びましょう。

 

 

topやleftなどといった位置指定をしてないのであれば、

とりあえずposition:relativeをつけとけば、

z-indexは効きますし、absoluteのように変なとこに飛んできません。

 

なので、とりあえずz-indexを効かしたい場合は、

absoluteよりrelativeを選んどいた方がいいでしょう。

 

 

スポンサードサーチ

まとめ

 

それではまとめに入ります。

 

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

positionプロパティをz-indexを効かしたい要素に、

つけることです。

 

そうすればz-indexが機能してくれます。

 

 

さて、これでz-indexの効かない問題の、

解決法がわかったと思いますので、

あなた自身でも試してみましょう。

 

そうすればあなたのプログラミングスキルや、

webページ制作力がアップしますよ。

 

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

 

 

チャーさん

-css, cssのposition関係

スポンサードサーチ

関連記事

no image

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

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

no image

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

   どうもチャーさんです。   あなたはz-indexが効かないと困っていませんか? ちゃんとrelativeもつけてるのに、 なぜ効かないんだと悩んでいませんか?   この記事 …

ワードプレスで文字の周りを線で囲う方法(コピペで一発でできます)

  どうもchamです。   あなたはワードプレスで記事を書いていて 囲いをつけたいと思ったことはありませんか?   ここに文字を入れる   こんな風に囲いをつ …

no image

レスポンシブで要素を消す方法「簡単にできます」

どうも、チャーさんです。 あなたは、レスポンシブで要素を消すには、 どうしたらいいのだろう、と思っていませんか?   この記事では、レスポンシブで要素を消す方法を、 コード例付きで書いてます …

no image

インライン要素にmarginの上下が効かない時の解決方法「簡単です」

  どうもチャーさんです。   あなたはインライン要素にmarginの上下を、 効かせたいのに効かなくて困ってませんか?   この記事では、そんな状態の解決方法を、 書い …

no image

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

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

no image

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

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

no image

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

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

no image

positionのabsoluteを解除する簡単な方法

どうも、チャーさんです。 あなたはposition:absoluteを解除したい、 そう思っていませんか?   この記事では、position absoluteを解除する方法を、 書いていま …

no image

cssで背景色を二色表示させる方法「コードつき」

どうも、チャーさんです。   あなたはcssで背景色を二色表示するには、 どうしたらいいんだろう? と思っていませんか。   この記事では、cssで背景色を二色 表示させる方法とコ …

no image

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

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

no image

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

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

no image

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

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

no image

wordpressのテーマのcssを編集する方法。3分でマスターできます。

どうも、チャーさんです。 あなたはwordpressのテーマのcssを編集したいですか?   この記事では、あなたの好きなように、 wordpressのcssを編集する方法を説明してます。 …

no image

レスポンシブでフォントサイズを可変にする方法「手間いらず」

どうもチャーさんです。   あなたはレスポンシブで、 フォントサイズを可変にする方法を 探していますか?   この記事では、フォントサイズをレスポンシブで 自動調整できる方法を書い …

最新記事

チャーさん

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

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

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