画像とあしらい文字を一塊にして塊で動かせるようにしたいです(現在レスポンシブでディスプレイ幅を調節する度にあしらいがずれてしまう)

Question

前提

「質問」
レスポンシブでディスプレイ幅を変更した際も画像の裏側のあしらい文字が動かないようにする方法をご教示いただきたいです。よろしくお願いいたします！！

「現在」
→画像の裏側にあしらい文字を配列しているのですが、レスポンシブでディスプレイ幅を変えるたびにずれてしまいます。
現在は、paddingで文字の位置を調節しているのですが、何か他に良い方法はないでしょうか？

実現したいこと

レスポンシブで横幅のサイズを変えるたびにpaddingを調節しなくてもよいように、
画像と文字(作品名が入る等)、あしらい文字(05)の3つの要素を一塊にしたい。

該当のソースコード

現在は以下のようにコードを組んでおります。

<a class="works-item" href="works-template.html">
    <div class="asirai">05</div>
    　　　<p class="works-img"><img src="img/works.jpg" alt="画像名を入れる" /></p>
       <p class="works-name">作品名が入る</p>
     　 <p class="works-info">Banner Design</p>
</a>

.works-img img {
  border: 1px solid #e6e6e6;
  position: relative;
}

.asirai {
  font-family: "BIZ UDゴシック";
  font-size: 90px;
  color: #fff;
  opacity: 0.3;
  position: absolute;
  margin-top: 190px;
  margin-left: 240px;
}

補足情報（FW/ツールのバージョンなど）

構築環境：Google　chrome / visual　studio　code

Comments

[Cocode]

> 画像と文字(作品名が入る等)、あしらい文字(05)の3つの要素を一塊にしたい。
フォントサイズについてはどうなりますか？

画面幅を狭くしたら画像が小さくなりますが、
それに合わせて「０５」のフォントサイズも小さくしますか？
それともそのままのサイズですか？

Answer 1

position: absolute;で位置決めする場合は、まず座標の基準とする親要素にposition: relative;を設定します。
質問のHTMLなら、.works-itemになるでしょう。
次に、この親要素のどこを基準に位置決めするかですが、画像のレイアウトから推測するに、親要素の右下を基準にするとよさそうです。その場合、right と bottom で右下からの距離を設定します。

画面幅に対して、要素のサイズをどうするのかの仕様が不明なので、こちらで適当に決めたサンプルコードを提示しておきますので、これを参考にしてお好みのサイズに修正してください。

.works-img img {
  border: 1px solid #e6e6e6;
  position: relative;
  width: 95%;
}
.works-item {
  display: block;
  position: relative;
  background-color: #e6d1c9;
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  text-decoration: none;
}
.asirai {
  font-family: "BIZ UDゴシック";
  font-size: 90px;
  color: #fff;
  opacity: 0.3;
  position: absolute;
  right: 5%;
  bottom: 5%;
}
.works-name, .works-info {
  font-size: 20px;
}

Comments

[risa_1010]

ずっと悩んでいたことだったので本当に助かりました！
ご丁寧にご回答いただき、ありがとうございます！！！✨