画像と画像を重ねる方法【HTML/CSS】

※自分用の備忘録です。

positionで重ねる

HTML

<div class="relative">
  <img class="absolute" src="img1.png" alt="画像1" width="100%">
  <img class="absolute" src="img2.png" alt="画像2" width="50%">
</div>

CSS

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

positionで重ねる場合は、レスポンシブの際などにレイアウト崩れしやすいので要注意です。

SVGで重ねる

<svg viewBox="0 0 400 300">
  <style>
  </style>
  <image xlink:href = "img1.png" width="100%" />
  <image xlink:href = "img2.png" width="50%" />
</svg>

拡大縮小に強く、レスポンシブでもレイアウトが崩れにくいです。

xmlでの記述が必要なため、タグの終わりに「/」が必要な点に注意が必要です。
また、スタイルの記述もHTMLと違う場合があります。

スタイルはsvgタグ内に記述ができます。