position:abusolute 動かしたあと固定したい。

画像の上（例えば右端）に文字をのせたかったとして、
画像にposition:relative
文字にposition:abusoluteを使ったとします。
topやleftの数値を変え、文字を置きたい場所においたのち、
画面サイズが変わったとしてもその位置から動かない（つまりは画像の右端のまま）ようにするには、
どのような要素を取り込んだらいいのでしょうか？

個人的にはメディアクエリで変えていくのかなと思っているのですが、この見解はどうなのでしょうか？
ご教授いただけたらと思います。

よろしくお願い申し上げます。

HTML
1<div class="img-wrapper">
2  <div class="img1">
3    <img class="img" src="img/1.jpg" alt="" width="100%">
4    <div class="desc one">
5      <h1>多彩な表現を楽しめる</h1>
6      <p>アートフィルターやアドバンストフォトモードといった機能を搭載するE-PL9なら、多彩な表現の写真撮影を手軽に楽しむことができます。</p>
7      <a href="#">▶︎詳細を見る</a>
8    </div>
9  </div>
10  <div class="img2">
11    <img src="img/2.jpg" alt="" width="100%">
12    <div class="desc two">
13      <h1>スマートフォンで簡単シェア</h1>
14      <p>Bluetooth®やWi-Fi®でスマートフォンと連携できるE-PL9。スマートフォンへの画像転送がより簡単・快適になりました。</p>
15      <a href="#">▶︎詳細を見る</a>
16    </div>
17  </div>
18  <div class="img3">
19    <img src="img/3.jpg" alt="" width="100%">
20    <div class="desc three">
21      <h1>操作性にもこだわった高品位デザイン</h1>
22      <p>使いやすさにもこだわって、PENシリーズらしい高品位なデザインに仕上げました。持ち運びのときのファッションコーディネートにマッチするアクセサリーも多数用意しています。</p>
23      <a href="#">▶︎詳細を見る</a>
24    </div>
25  </div>
26</div>

CSS
1.img{
2  width: 100vw;
3  position: relative;
4}
5
6.desc{
7  width: 40vw;
8  position: absolute;
9  box-sizing: border-box;
10}
11
12.one{
13  right: 8vw;
14  top: 47vh;
15}
16
17.two{
18  left: 5vw;
19  top: 97vh;
20}
21
22.three{
23  right: 8vw;
24  top: 155vh;
25}
26
27
28.desc h1{
29  font-size: 20px;
30  font-weight: normal;
31}
32
33.desc p{
34  font-size: 15px;
35  font-weight: normal;
36
37}
38
39.desc a{
40  padding:10px 80px;
41  background-color: #FFA500;
42  display: inline-block;
43  font-size: 12px;
44  border-radius: 3px;
45  letter-spacing: 5px;
46  box-shadow: 2px 2px 2px #C0C0C0;
47}
48
49.desc a:hover{
50  background-color: #FF5F17
51}