absoluteで配置したテキストの位置を、ウィンドウ幅にかかわらず固定する方法

Question

実現したいこと

ウィンドウ幅がどんな長さのときでも（ただし最大幅は767px）、
absoluteで画像の右上に重ねた文字（text）が、その位置のバランスを保ったままでいて欲しい

現状

「text」のfont-sizeを、
・vwで指定…
ウィンドウを狭めると、画像に比べテキストも小さくなり画像の上側に寄って行ってしまう。
・pxで指定…
ウィンドウを広げると、画像に比べテキストも小さくなり画像の上側に寄って行ってしまう。

備考

・スマホ、タブレット用ページの制作です
・「文字を画像にする」以外の方法ですと、大変嬉しいです…！

コード

<div class="container">
  <div class="inner">
    <div>
      <img src="http://placehold.jp/150x100.png">
    </div>
    <div class="text">
      <p>text</p>
      <img src="http://placehold.jp/150x100.png">
    </div>
  </div>
</div>

@media screen and (max-width:767px){
  .container {
  padding: 30px;
  background: skyblue;
}
  .inner {
    width: 98%;
    margin: 0 auto;
    background: #fff;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
  }
  .inner img {
    vertical-align: bottom;
    width: 100%;
  }
  .inner > div {
    width: 40%;
  }
  .text {
    position: relative;
  }
  .inner p {
/*     font-size: 4vw; */
    font-size: 20px;
    position: absolute;
    top: -20px;
    right: -10px;
  }
}

参考画像（font-sizeをpxで指定した場合）

▼理想の「text」の位置（画像の中央と上辺の真ん中に位置している）

▼「text」が画像に比べ小さくなり、画像の上側に寄って行ってしまっている状態

何か解決法があれば、教えていただけますと幸いです。
よろしくお願いいたします。

Answer 1

おそらく、topとrightをcalcで設定することで解決できると思います。

  .inner p {
    font-size: 4vw;
    position: absolute;
    top: calc(-10%);
    right: calc(-5%);
  }

動作はこんな感じ。
動作テスト

Comments

[_sz]

ご回答ありがとうございます！
少しお聞きしたいのですが、calcを付けずに
top: -10%;
right: -5%;
と指定する方法でも問題ないでしょうか…？

[yukihisa]

ピクセルで微調整しないのならcalcなしでも大丈夫ですよ！

[_sz]

そうなのですね！
ご返信ありがとうございます！

Answer 2

https://jsfiddle.net/kqys2nbp/3/
こういうことですかね？

  .inner p {
    font-size: 20px;
    position: absolute;
    top: calc(25% - 20px);
    right: -10px;
    margin: 0;
  }

Comments

[_sz]

ご回答、ありがとうございます！
topは、画像の縦半分を表す25%から、textの位置してほしい位置である画像の半分の半分の20pxを引いたんですね！