ウィンドウ幅を変えても画像を指定の位置に固定したい

Question

前提・実現したいこと

ウィンドウ幅を変えた時も、btn画像のサイズを固定して動かないようにしたいです
またコンテンツ幅は1000pxで固定してあります。

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

position abusolute　を使い固定したものの
ウィンドウの幅を変えるとbtn画像が動いてしまいます

該当のソースコード

<div class="pc_wrapper">
  <div class="pc_offer1">
    <div class="pc_offer1_bg"><p class="inner_sinki "><img src="img02.jpg"></p></div>
    <div class="pc_of_btn1"><a href="#"><img src="btn.jpg"></a></div>
  </div>
</div>

  .pc_wrapper img {
    width: 1000px;
    margin: 0 auto;
  }

  .inner_sinki {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: center;
  }

  .pc_offer1 {
    position: relative;
  }

  .pc_of_btn1{
    position: absolute;
    top: 630px;
    left: 100px;
    width: 900px;

  }

試したこと

px指定がよくないのかと思い、vwや％でも試してみましたができませんでした。
思いつくことは試してみましたがやはりずれてしまいまして、
お教えいただけますと幸いです。

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、ボタン画像が動くということはありませんでした。

↓サンプル
https://jsfiddle.net/Lhankor_Mhy/ejz1bntw/

おそらく、ご提示いただいていない部分のコードの影響かと思います。

Answer 1

こまかいレイアウトが不明瞭なのですが、とりあえずは、

  .pc_wrapper img {
    width: 1000px;
    margin: 0 auto;
  }

上記の部分をかきに変更してはどうですか。

  .pc_wrapper {
    width: 1000px;
    margin: 0 auto;
  }

.pc_wrapper img だと、.pc_wrapper内のすべてのimg要素に適用されてしまいます。これではうまくいきません。

外枠（.pc_wrapper）の幅を固定して中央配置しておいて、
その中で、各要素の位置やサイズを決めるとという設計にしないとだめでしょう。