position relativeとレスポンシブを組み合わせたい

Question

windowサイズを縮小させても常にdiv要素の右下にボタンを配置を配置させたい(windowサイズがボタン幅近くになるときにはボタンは中央に位置させたい。)ですのですが、
下記のようにposition:relativeで配置すると縮小させても徐々にはみ出てしまいます。
どうすればよいでしょうか。

button {
width: 400px;
position:relative;
top : 80%;
left: 70%
}

青がdiv
赤がボタンです。

![]

Answer 1

divは、基準となる relative
buttonを、絶対配置の absolute にします

div{
  position:relative;
}
button {
  width: 400px;
  max-width: 70%;
  position:absolute;
  bottom : 20%;
  right: 15%
}

これで想定通りかと思います^^

Comments

[dda]

ありがとうございました！
助かりました！