フロントCSS【position:absolute】

Question

ヘッダーと想定
￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣
ロゴ　すぺーーーーーーーーす■■■すぺーす
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

諸事情あって、■■■の一塊をposition:absoluteで実装するのですが、横軸はright,leftどちらで調整するべきでしょうか？

個人的には、rightの方が○pxが小さい数で済むので良いと思います。

rightの方が良い他の理由
px数が大きくなってもleftの方がいい理由がありましたら教えていただきたいです。

よろしくお願いします。

Comments

[kszk311]

https://teratail.com/questions/129853 こちらと質問が被っていると思いますので、解決済みとするのではなく、いらない方削除依頼を出してください。また、解決済みにした物を書き換えるのは、意図的に内容が消されたと判断され、低評価を付けられる可能性があります。https://teratail.com/help/avoid-asking

Answer 1

要素の幅が変わった時に
要素の右側に連動して位置が変わるならright
要素の左側に連動するならleft

leftで統一しておいた方がレスポンシブ対応で
上書きするとき混乱しにくいというのはあります

left指定しても位置が変わらないと思ったら
先にrightで指定してるからだったとかあるので

そんなときはcalc()とか使うのもありですかね

Comments

[退会済みユーザー]

ご回答ありがとうございます！

要素の幅が変わった時に
要素の右側に連動して位置が変わるならright
要素の左側に連動するならleft

についてもう少し詳しく教えていただいても良いでしょうか？

[KazuhiroHatano]

例えば画面幅が小さくなってヘッダーの幅が狭くなった時
あるいは逆にヘッダーを画面に合わせて引き伸ばした時

デザイン的に左基準で位置が変わるべきなのか
右基準で位置が変わるべきなのか

質問の例で言えば
ロゴとの距離がキープされるべきなのか
右側の余白がキープされるべきなのか

まずはそこが判断基準です

[退会済みユーザー]

なるほど、
良く分かりました！
ありがとうございました、ベストアンサーにさせていただきます。