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でテーブルをレスポンシブにし、 かつ縦並びにしたい、と思っていませんか?   この記事では、テーブルを縦並びにする方法を、 紹介していま …

no image

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

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

no image

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

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

no image

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

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

no image

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

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

no image

画像の高さを揃える方法「簡単にできる方法です」

  どうも、チャーさんです。   あなたはサイズの違う画像の高さを、 揃える方法を探していますか?   この記事では、webページ制作で直面する、 画像の高さを揃える方法 …

no image

htmlのリンクの下線を消す方法「1行書けば消せますよ」

どうも、チャーさんです。   あなたはhtmlのリンクの下線を消す方法を、 探していませんか?   この記事では、リンクの下線を消す方法を 書いています。   &nbsp …

no image

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

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

no image

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

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

no image

cssの書き方カンマについての疑問はこの記事で解消

どうも、チャーさんです。   この記事ではcssの書き方の1つである カンマについて書いてます。   なのでこの記事を読めば、あなたは cssのカンマについての疑問が解消され、 さ …

no image

absoluteとrelativeの違いがこれを読めば1目でわかりますよ。

  どうも、チャーさんです。   あなたはabsoluteとrelativeの違いがわからず、 困っていませんか?   またそのせいで、思ったように ページ制作に活用でき …

no image

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

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

no image

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

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

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

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

no image

cssで要素の位置調整をする方法を丁寧に解説コピペもok

どうも、チャーさん(@chaa___san)です。   あなたはcssで画像やdivで作った要素の位置調整を、 したいと思っていませんか?   この記事ではcssでそれらの要素の位 …

最新記事

チャーさん

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

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

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