[解決済み】HTMLで1つの画像を別の画像の上に配置するにはどうすればいいですか？

質問

私はrailsプログラミングの初心者で、1ページに多くの画像を表示しようと試みています。 ある画像は、他の画像の上に重ねることになります。 簡単に言うと、青い正方形と、青い正方形の右上に赤い正方形を置きたいのです（ただし、角にはきっちり置かない）。 私は、パフォーマンスの問題のために、（ImageMagickや類似のもので）合成を避けようとしています。

重なった画像を相対的に配置したいだけなのですが。

もっと難しい例ですが、走行距離計を大きな画像の中に配置することを想像してください。 6桁の数字を表示するためには、100万通りの画像を合成するか、6枚の画像を重ねるだけで済むところを、すべてオンザフライで行う必要があるのです。

どのように解決するのか？

さて、しばらくしてたどり着いたのがこちら。

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  border: 1px red solid;
}
.image2 {
  position: absolute;
  top: 30px;
  left: 30px;
  border: 1px green solid;
}

<div class="parent">
  <img class="image1" src="https://via.placeholder.com/50" />
  <img class="image2" src="https://via.placeholder.com/100" />
</div>

最もシンプルな解決策として。 ということです。

ページの流れに沿って相対的な div を作成し、ベース画像を最初に相対的に配置して div がその大きさを認識できるようにし、オーバーレイを最初の画像の左上からの絶対的な相対値として配置します。 コツは、relativeとabsoluteを正しく設定することです。