HTML,CSSを用いて画像の上に重ねてボックスを配置したい

Question

あまりにも初学的な質問で申し訳ありません。
添付画像のように画像に重ねて白いボックスを配置したいと考えているのですが、どのようなコードを書けばいいのでしょうか？
また、今回のような画像だけでなく、重ねて表示したい場合にはどの種類のコードを用いて表現するのが一般的なのかを教えていただきたいです。

Answer 1

こんな感じではどうでしょうか?

<div class="bg-img">
  <div class="box">
  </div>
</div>

.bg-img {
  // 背景画像に指定
  background-image: url('画像/の/パス.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%;
  // 子要素を右隅に。
  display: flex;
  justify-content: flex-end;
  // divのサイズ。適当
  width: 100vw;
  height: 100vh;
}

.box {
  // 上と右の隙間。
  margin-top:3rem;
  margin-right: 3rem;
  // divのサイズ。適当
  background-color:red;
  width:20vw;
  height:60vh;
}

Answer 2

画像をimgタグで表示させるのではなく、div要素の背景画像（cssのbackground-image）で設定するのがレスポンシブ対応させやすいのでお勧めです。

白いボックスは、背景画像を設定した子要素にしてmarginなりflexなりを使って配置します。

今回のような画像だけでなく、重ねて表示したい場合にはどの種類のコードを用いて表現するのが一般的なのか

通常の場合は重ねたい要素を子要素にすれば自然に重なります。
子要素にできない事情があるときは、position: absolute; とかネガティブマージンを使って重ねます。

Answer 3

画像をdivタグで囲い、div要素にposition: relative;、画像imgは適当に大きさ設定、
divタグ内画像imgと兄弟要素として白い四角を置き、position: absolute;して、topかbottom、leftかrightで適当に配置します。