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

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

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

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

no image

メニューに下線をだすcss(マウスでホバーした時に)

どうもチャーさんです。 あなたはメニューに下線をだすcssを 探していますか?   この記事では、メニューの上に マウスを持っていくと、メニューに下線が 表示される方法を書いています。 &n …

no image

cssでレスポンシブ対応にするための方法、具体的な手順を解説します

どうも、チャーさんです。   あなたはcssでレスポンシブにするには、 何を書けばいいのか?と思っていませんか?   この記事では、cssでレスポンシブにするための、 方法や、記述 …

no image

cssのレスポンシブの書き方「初心者向け記事」

どうも、チャーさんです。   あなたはcssのレスポンシブの書き方を、 知りたいと思っていませんか?   この記事では、cssのレスポンシブの書き方、 メディアクエリ、コードの具体 …

no image

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

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

no image

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

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

no image

wordpressで条件分岐でcss(デザイン)を切り替える方法

どうもチャーさんです。 あなたはwordpresで、条件分岐させて、 css(デザイン)を切り替えたいと思っていませんか?   ページごとに違うデザインを施せるように したい、そう思っていま …

no image

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

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

no image

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

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

no image

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

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

no image

cssで中央寄せ(縦に)したい場合にどうぞ

  どうも、チャーさんです。   あなたは縦に中央寄せできるcssを、 探していませんか?   この記事ではお手軽に縦の中央寄せができる、 cssを紹介しています。 &n …

no image

cssで背景画像を表示するコードと方法「コピペOK」

どうもチャーさん(@chaa___san)です。     あなたはcssで背景画像を表示したいですか?   この記事ではcssで背景画像を表示する方法、 コード、あなた自 …

no image

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

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

no image

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

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

no image

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

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

最新記事

チャーさん

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

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

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