HTML | 画像を重ねて表示する
HTMLだけで画像を重ねて表示する方法とサンプルコードを紹介しています。
HTMLで画像を重ねて表示する
HTMLには画像を重ねる事が可能な属性や専用タグは用意されていませんが、CSSと同じ様にstyle属性にてスタイルを指定する事でHTMLコードだけで実装可能です。
画像に「position」プロパティで「absolute」を指定する事で絶対値による配置となり、同じ要素内にあり同じ様に「absolute」が指定された画像同士は重なって表示されます。
それだけですと、以降の要素ともかさなってレイアウトの崩れが発生しますので、高さを持つ親要素を用意します。
また親要素には「absolute」を指定した要素の基準位置とするため「position」プロパティで「relative」を指定します。
<div style="position: relative; relative;height: 200px">
<img style="position: absolute;" src="https://1-notes.com/wp-content/uploads/2023/06/check-pattern-1.png" alt="画像の説明">
<img style="position: absolute;" src="https://1-notes.com/wp-content/uploads/2023/06/slime.png" alt="画像の説明">
</div>
「z-index」プロパティの指定がない場合、後に記述された画像タグの画像が全面に表示されます。
全面になる画像が透過されていない場合、背面の画像は隠れます。
また、画像のサイズが違っていて、合わせたい場合は画像に対して「width」や「height」を指定して下さい。