css cssのposition関係

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

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

Pocket

うも、チャーさんです。

 

あなたはposition:absoluteが、

レスポンシブにすると、ずれるということで、

困っていませんか?

 

画面サイズを変えるだけで、

位置がぐちゃぐちゃになり発狂しそうに、

なっていませんか?

 

 

この記事では、position:absoluteが、

レスポンシブでもずれるのを解決する、

方法を紹介します。

 

なのでこの記事を読めば、あなたは、

position:absoluteで指定した要素が、

レスポンシブの時にずれて発狂することが無くなります。

 

単純にコーディングや、制作のストレスがへるので、

position:absoluteのレスポンシブ対応で、

ずれる、と困っている場合、このまま読んでみてください。

 

スポンサードサーチ

position absoluteがレスポンシブでずれるのを防ぐ方法

 

で、早速結論から入りますが、

position:absoluteを使った状態で、

レスポンシブにするには、

 

親要素にposition:relative;をつけて

子要素にabsoluteをつけて位置指定をする、です。

(親要素はレスポンシブにしておくこと)

 

 

ということで、まずはその証明として早速実際に、

コードと実行結果でみていきましょう。

 

こちらは背景の猫画像に、

青いボックスをabsoluteで、

位置指定したものです。

 

 

で、今回はレスポンシブ対応なので、

画面サイズを変えても、青色ボックスの場所が、

崩れずに、ちゃんと猫画像の真ん中にいてくれればokです。

 

では、このまま画面サイズを変えて、

小さくしてみましょう。

 

何も考えずにposition:absoluteで指定すると、

青色ボックスがどっか変なとこにいくはずですが、、

 

 

はい、ちゃんと画面サイズを変えても、

自動で位置調整をしてくれて、

青色ボックスが真ん中にありますね。

 

absoluteで指定した要素の位置がずれず、

デザインが崩れていませんね。

ちゃんとレスポンシブになってます。

 

 

で、こんな風に、position:absoluteでも、

親要素にrelativeをつける、

そして子要素をabsoluteで位置指定する。

 

それにより位置が崩れずにレスポンシブ対応に、

することができます。

 

で、ここからはなぜ親要素にposition:relativeをつけて、

子要素にposition:absoluteの位置指定で、

レスポンシブ対応になるか説明します。

 

position absoluteがレスポンシブ対応になった理由

 

position:absoluteは、

position:relativeがついてる親要素からみて、

位置指定をします。

 

ちなみにこの記事の例の場合

親要素はdivのoyayousoとクラスつけてるやつです。

 

 

この親要素を起点に、

位置指定をしてやると、

 

画面サイズを変えて親要素のサイズが変わっても、

その親要素を起点に位置指定をするため、

結果的に、absoluteでもレスポンシブになるということです。

 

 

position:absoluteは、

画面サイズをいじると位置が簡単に崩れます。

 

なので、レスポンシブ対応させたい場合は、

親要素を用意し、そこにposition:relativeをつけて、

その親要素の中に、子要素として入れてabsoluteしましょう。

 

スポンサードサーチ

position absoluteをレスポンシブ対応にする手順。ずれるのはもう終わり

 

でposition absoluteでのレスポンシブのやり方を、

説明しましたが、

 

手順を補足しておきます。

 

position:absoluteがレスポンシブで、

ずれるのを解決するためには、

 

親要素を用意しましょう

 

まずは、position:absoluteの、

親要素となるものを用意しましょう。

具体的には、divタグとかで作るといいです。

 

注意すべきこと

 

でこの時に注意なのが、

absoluteを指定する要素の親要素を、

レスポンシブ対応にしておくことです。

 

なぜかというと、

そうでないとposition;absoluteは、

レスポンシブ対応にならずに、ずれるからです。

 

 

例えばこのように、親要素に、

幅を指定してみましょう。

 

すると、

 

 

上記結果のように、スマホサイズにしても、

青色ボックスが画面と写真の真ん中にこず、

位置がずれましたね。

 

こんな風に、親要素をレスポンシブ対応にしないと、

次の手順で子要素としてabsolute入れても、

レスポンシブ対応になってくれないのです。

 

 

なので、position:absoluteをつける子要素の、

親要素はちゃんとレスポンシブ対応にしておきましょう。

 

ちなみに余談ですが親要素をレスポンシブにするには、

基本的に幅(width)や高さ(height)を指定しないことです。

 

指定すると上の画像のように、

画面サイズを変えると、画像が切れたりするので。

 

子要素にposition:absoluteを指定しよう

 

で手順に話を戻して次に、その作った親要素の中に、

position:absoluteで位置指定したいものを、

子要素としていれます。

 

でそのあとは、位置指定をしましょう。

top:10px;

left:10px;

とか書いて位置を決めます。

 

ブラウザチェックしましょう

 

で、ここまでできたら、

実際にブラウザで実行して、

ちゃんとレスポンシブになってるか確かめましょう。

 

そしてちゃんとposition:absoluteしたものが、

画面サイズに合わせて位置の移動してたら、

okで完成です。

 

スポンサードサーチ

余談・position:absoluteで画像の上に画像を載せてレスポンシブしたい

 

ちなみにposition:absoluteでは、

画像の画像を載せるみたいな使い方が多いです。

 

でかつレスポンシブにしたい、

みたいなのが制作ではあります。

 

 

その際まずは画像をレスポンシブにする必要があるので、

画像をレスポンシブ対応したい場合は、

以下の記事をどうぞ。

 

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

 

で上の記事の内容で画像をレスポンシブにしたら、

本記事の内容を使えば、

画像の上に画像というのはできます。

 

単純にこの記事で使った青色ボックスを<img>タグで、

画像に変えればokなので。

 

 

以上余談でした。

 

 

スポンサードサーチ

まとめ

 

position:absoluteがレスポンシブで、

ずれるのを解決する方法ですが、

 

親要素にposition:relativeをつけ、

(親要素をレスポンシブ対応にしつつ)

その親の子要素にposition:absoluteで位置指定をするです。

 

こうすれば、親要素のサイズが変わった時に、

子要素のposition:absoluteも動いて、

自動的に位置を調整してくれるようになるので。

 

 

position:absoluteは、

画面サイズの変更で簡単に位置がずれて、

なんだこれー!と発狂するものですが、

 

この記事の方法で、レスポンシブ対応にできるので、

ぜひやってみてください。

 

さて、それでは早速あなたのスキル上昇のために、

まずは親要素を用意して、

その子要素にabsoluteをつけて位置指定してみましょう。

 

 

またコードとかは、この記事の例を、

参考にしたり、真似てもらってもokですので、

実際にコードを書いて挙動を確かめてみてください。

 

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

 

チャーさん

 

-css, cssのposition関係


スポンサードサーチ

関連記事

no image

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

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

no image

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

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

no image

レスポンシブ対応の画像にする方法。1行コードを書くだけでOK

  どうも、チャーさんです。   あなたは画像をレスポンシブ対応にしたい、 そう思っていませんか?   ブレイクポイント毎に、画像の幅を指定するのは、 もう疲れた、何か一 …

no image

cssでメニューに区切り線を表示させる方法

どうもチャーさんです。   あなたは、cssでメニューに区切り線を、 表示させたいと思っていませんか?     この記事では、以下の画像のような、 区切り線を表示させる方 …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

cssの背景画像が繰り返しになるのを解決する方法

どうも、チャーさんです。   あなたはcssで背景画像を設置すると、 繰り返しになっていて困っていませんか?   この記事では、cssで表示した背景画像が、 繰り返しにならない方法 …

no image

cssで画像を中央寄せできないを一瞬で解決する方法「コピペOK」

どうもチャーさん(@chaa___san)です。   あなたはcssで画像の中央寄せができないと、 悩んでいませんか?   この記事ではそんな悩みを解決し、 一発で画像を中央寄せで …

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

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

no image

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

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

最新記事

チャーさん

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

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

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