【CSS】親要素が可変の時、position:absoluteで配置した子要素の位置の調整について

Question

###前提・実現したいこと
html構造において親要素がブラウザ幅に対応して伸縮するケースで子要素をposition:absolute配置する際に、親要素が伸縮しても常に子要素が意図した位置にくるように設定したい

具体的にはメインビジュアルがあり、そのなかにCSSアニメーションで動かしたい子要素があり、分けて配置している。

###発生している問題
子要素のwidthや配置(top,left等)をすべてパーセンテージで設定しているが、親要素の伸縮によって微妙に位置がずれる。
みなさんがどのように実装しているのかをしりたい。

###コード

【html】
<div class="background">
  <img class="item" src="img/item.png">
</div>

【css】
.background{
background:url(img/background.png);
※backgroundが中央いっぱいに表示されるスタイルは簡潔化のため省略します
position:relative;
width:100%;
}
.item{
width:20%;
position:absolute;
top:40%;
left:20%
}

###試したこと
課題に対してアプローチしたことを記載してください

###補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報

Answer 1

ちょっと勘違いしていました。上記自分で書いたコードで実装できそうです。