どうも、チャーさんです。
あなたは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では、
画像の画像を載せるみたいな使い方が多いです。
でかつレスポンシブにしたい、
みたいなのが制作ではあります。
その際まずは画像をレスポンシブにする必要があるので、
画像をレスポンシブ対応したい場合は、
以下の記事をどうぞ。
レスポンシブ対応の画像にする方法。１行コードを書くだけでOK
で上の記事の内容で画像をレスポンシブにしたら、
本記事の内容を使えば、
画像の上に画像というのはできます。
単純にこの記事で使った青色ボックスを<img>タグで、
画像に変えればokなので。
以上余談でした。
スポンサードサーチ
まとめ
position:absoluteがレスポンシブで、
ずれるのを解決する方法ですが、
親要素にposition:relativeをつけ、
(親要素をレスポンシブ対応にしつつ)
その親の子要素にposition:absoluteで位置指定をするです。
こうすれば、親要素のサイズが変わった時に、
子要素のposition:absoluteも動いて、
自動的に位置を調整してくれるようになるので。
position:absoluteは、
画面サイズの変更で簡単に位置がずれて、
なんだこれー！と発狂するものですが、
この記事の方法で、レスポンシブ対応にできるので、
ぜひやってみてください。
さて、それでは早速あなたのスキル上昇のために、
まずは親要素を用意して、
その子要素にabsoluteをつけて位置指定してみましょう。
またコードとかは、この記事の例を、
参考にしたり、真似てもらってもokですので、
実際にコードを書いて挙動を確かめてみてください。
それでは、読んでもらってありがとうございました。
チャーさん
