position: absolute;のレスポンシブ化について

Question

position: absolute;のレスポンシブ化について

こんにちは。プログラミング初心者です。

rails を使ってHPを作成しています。
レスポンシブ化を行なっているのですが、つまづいてしまいました。

以下に図を添付させていただきました。

左の図から画面サイズを大きくすると右の図のように②の画像とテキストはそのまま拡大されるのですが、③、⓸の画像だけどずれてしまいます。

コード記載しています。かなり初歩的なことだとは思いますが、色々試したのですがうまく行きません。アドバイス頂きたいです。よろしくお願いします。

<div id="q1" class="Question_8" >
      <img class="imag_1" src="akaruihaikei.jpg">
      <img class="imag_2" src="check.png">
      <h1 class="QU_E">Question 1</h1>
      <h2 class="koumok_u">痛くて狭い範囲すら動かせない</h2>
      <a class="btn_yes" href="#q2"><img class="ye_s" src="yes.png"></a>
      <a class="btn_no" href="#q2"><img class="no_" src="no.png"></a>
</div>

.imag_1{
    position: absolute;
    height:300px;
    top:210px;
    left:370px;
}
.imag_2{
    position: absolute;
    height:150px;
    top:310px;
    left:720px;
}
.QU_E{
  font-family: "ＭＳ 明朝",serif;
  font-size: 30px;
  color:#FF9966;
  position: absolute;
  top:209px;
  left:400px;
}
.koumok_u{
     position: absolute;
     font-family: "ＭＳ 明朝",serif;
     font-size: 20px;
     top:270px;
     left:400px;
}
.ye_s{
  position: absolute;
  right:830px;
  top:360px;
  height:130px;
}
.no_{
  position: absolute;
  right:680px;
  top:360px;
  height:130px;
}

Answer 1

おす！　ちょっとHTMLとCSSの設計の基本がまじぃみてぇだな。

おめぇのやり方だと、4枚の画像それぞれの基準座標がブラウザ自体になっちまってんだ。
だからブラウザのサイズが変わるとレイアウトが崩れちまう。

4枚の画像を入れてる<div id="q1" class="Question_8">が基準になるようすんのが基本だぞ。

そのためには、その要素の position を指定してやりゃあいい。

div#q1 {
    position: absolute;
}

みてぇな感じだな。

そうすっと、中の4枚の画像の座標基準はdiv#q1になる。
topもleftもrightも全部、div#q1の4辺を基準にした値になるから、div#q1が移動してもサイズが変わっても、デザインはブラウザではなくてdiv#q1に追随するようになるんだ。

要約すっと、

####親要素には必ずpositionを指定しろ

ってぇ事だぞ。

Comments

[hatena19]

今回の質問で、画面サイズを広げると画像がずれるのは、#q1 に position: absolute; を設定することで解決するとお考えですか？

[退会済みユーザー]

なんで解決しないとおもってんだ？

質問者のCSSどうなってて、質問者の理想像の位置どうなってる？

[退会済みユーザー]

で、なんで解決しないと思ってんのに、
おらの回答と全く同じ内容をおめぇの回答に「追記」とか言って加えてんだ？

[退会済みユーザー]

hatena19ってさ、あたま悪ぃよな。あるものそのまんましか考えられねぇだろ。

今回の質問の場合、画像サイズを変える事でレスポンシブにするなら
どう修正していくべきかって事、全くわかってねぇだろ。

[hatena19]

実際、それでは解決しないですよ。
追記は今回の質問のずれとは関係ないですが、あくまで補足です。

[退会済みユーザー]

はっきり言うけど、レスポンシブで
left固定なんてありえねぇよ。

ちょっと考えてみりゃぁそのくれぇ分かるだろうに。

[退会済みユーザー]

で、なんで追記、取らねぇの？
漁夫の利？

[kyoya0819]

全く関係ないが、「漁夫の利」ではない気がする。（意味的に

Answer 2

HTMLとCSSでセレクタが異なっているのはタイプミスですか。
HTML → btn_yes btn_no
CSS → .ye_s .no_
タイプミスとして、
（aタグとimgタグの違いでした。）

.imag_1 と .imag_2 は、左基準left:で位置決めしているのに対して、
.ye_s と .no_ は右基準right:で位置決めしているのが原因でしょう。

.ye_s と .no_ も左基準の位置決めに修正すればいいでしょう。

追記

現状だとbodyの左上が座標基準になります。親要素の#q1を座標基準にしたいなら、それに、position:relative;を設定してください。(absoluteじゃないのでご注意くださいね。)

#q1 {
  position:relative;
}

追記2

画像のずれをそろえるには、上記の回答のようにそれぞれの画像の位置決めを left に統一するのがいいのですが、
そのうえでレスポンシブ対応→画面幅に関わらず画面の中央に表示にするには、親要素(#q1)の幅を固定してそれを中央寄せにする設定にするのがいいでしょう。
Codepenサンプル

Comments

[akintat-2748]

ありがとうございます。
leftに変更したらうまくできました。助かりました。
セレクタは記載ミスでした。すみません。

[退会済みユーザー]

全部 top left 基準にしたらレスポンシブにならねぇだろ。
回答の方向性180度変わったらそりゃもう、追記じゃねぇだろ。

このサイト、どうなってんだ？　一体。

[hatena19]

親要素の幅が変わったら(body基準でも、#q1基準でも)、left と right では位置がずれます。この質問は、画面サイズが変わってもそれぞれの画像が重なったままにしたいということなので、top left 基準でいいと思いますが。質問の画像をよくみてください。

[退会済みユーザー]

そう思うなら、なんで追記してんだ？　おめぇ。
言ってる事とやってること、合ってねぇだろ。

[退会済みユーザー]

親要素の幅変わった場合に、leftで位置指定すんのがレスポンシブだと思ってんのか？
おもしれぇ事考えるな、おめぇ。

[退会済みユーザー]

まぁ、こんな回答でも質問者がベストアンサーくれるんだからそれでいいんじゃねぇか？

ただ、追記はとっとけ。回答内容ぶれっから。

[akintat-2748]

色々とありがとうございます。試行錯誤で徐々に勉強して行きたいと思います。また、アドバイスのほどよろしくお願い致します。