画像を特定の位置に配置してレスポンシブ対応させたい

Question

前提・実現したいこと

画像を任意の特定の位置に置きたいです。
またウィンドウ幅を変えたり、ウィンドウの縮小をしてもレイアウトが崩れないようにしたいです。

発生している問題・エラーメッセージ

<img src="bg.jpg" alt="">はウィンドウ幅の変更、ウィンドウ縮小をしてもきちんと表示されるのですが、
<img src="btn.jpg" alt="">はずっと同じ位置にいてずれが生じてしまいます。

<style type="text/css">
.wrapper {
padding: 0;
width: 100%;
}
.inner_sinki {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-align: center;
}

.inner_sinki img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
vertical-align: bottom;
}


.offer {
position: relative;
}


.btn1{
position: absolute;
top: 300px;/*任意の位置*/
left: 500px;/*任意の位置*/
}
</style>

  <div class="wrapper">
       <div class="inner_sinki">
          <p class="offer_bg"><img src="bg.jpg" alt=""></p>
        </div>

        <div class="offer inner_sinki">
          <p class="offer_bg"><img src="bg.jpg" alt=""></p>
          <p class="btn1"><a href="###"><img src="btn.jpg" alt=""></a></p>
        </div>
   </div>

試したこと

position: absolute;で一をピクセルで指定いてるからダメなのかと思い、
vwや％に変更してみたのですが駄目でした。

Answer 1

ボタンと背景の座標をそれぞれ指定すると表示崩れが起きやすいので、
.inner_sinkiの位置を左右中央配置にして、その中でさらに背景とボタンを指定するほうがよさそうです。

.inner_sinki {
  position: relative;
  width: 800px; /* 好きなように設定してください */
  margin: 0 auto;
}
.inner_sinki .offer_bg img {
  width: 100%;
}
.inner_sinki .btn1 {
  position: absolute;
  top: 100px; /* 好きなように設定してください */
  left: 0;
  right: 0;
  margin: auto;
  width: 400px; /* 好きなように設定してください */
  display: block;
}
.inner_sinki .btn1 a,
.inner_sinki .btn1 a img {
  width: 100%;
  display: block;
}

Answer 2

メディアクエリ使って、ウィンドウの横幅が一定以下になったらabsoluteとか諸々解除してやればいいんじゃないですかね？

@media screen and (max-width:1024px) {
	/* 画面サイズが1024px以内で発動 */
    .btn1{
        position: static;
        top: auto;
        left: auto;
    }
}