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

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

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

no image

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

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

no image

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

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

no image

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

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

cssでテーブルの行間を広げる方法

  あなたはcssでテーブルに行間をとりたい、 (セルとセルの間のスペースを広げたい)と思ってませんか?   この記事では、cssでテーブルの行間を 広げる方法を書いてるので、読め …

no image

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

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

no image

flexcssを使って横並びにする方法(ページ制作に超便利です)

どうも、チャーさんです。   あなたはflexというcssのプロパティを使い、 要素を横並びにする方法を知りたい。 そう思っていませんか?   この記事ではcssのflexを使い、 …

no image

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

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

no image

cssで背景色を背景画像の上に重ねる方法「コードつき」

どうも、チャーさんです。   cssで背景色を背景画像に重ねる方法が、 知りたい。そう思っていませんか?   この記事では、cssで背景色を 背景画像の上に重ねる方法を書いています …

no image

cssの書き方コメントが知りたいならこの記事をどうぞ。

どうも、チャーさんです。   この記事ではcssの書き方の1つ、 コメントについて書いてます。   具体的には、 ・そもそもコメントとは? ・コメントを書く方法 ・実用的なコメント …

no image

cssスマホ時のフォントサイズはこのサイズが良さげ

  どうも、チャーさんです。   あなたはcssのスマホのフォントサイズを、 どれぐらいにすればいいか、 と疑問に思っていませんか?     この記事では、迷っ …

no image

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

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

no image

cssで背景画像を回転させる方法。1行書けばok

どうも、チャーさんです。   あなたはcssで背景画像を回転させたい。 そう思っていませんか?   この記事ではcssを使って、 背景画像を回転させる方法を書いています。 &nbs …

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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