CSS | 画像を重ねて表示する方法
CSSのpositionプロパティを利用して画像を重ねて表示する方法とシンプルなサンプルコードを紹介しています。
positionプロパティで像を重ねて表示する方法
2枚の画像、または複数の画像を重ねて表示する簡単な方法として多くはpositionプロパティを利用します。
※サンプル内の画像はサイズを調節しています。
See the Pen CSS position absolute in absolute by yochans (@yochans) on CodePen.
HTML要素には、画像を表示する親要素をdivで作成しています。
その親要素の中に重ねて表示する画像を置いていきます。
<div class="container">
<img id="image-1" src="https://1-notes.com/wp-content/uploads/2021/11/background-pale-rainbow-colored-horizontal-stripes-2-1200x720-1.png">
<img id="image-2" src="https://1-notes.com/wp-content/uploads/2021/11/illust-pizza-toast-800x800-1.png">
</div>親要素にはpositionプロパティで「relative」を指定します。
ページコンテンツの左上隅であれば指定しなくても問題ありませんが、「absolute」を指定する子要素の基準点は「relative」が指定された親要素もしくはbodyとなるため指定がないとbodyが基準点となるので必要になります。
positionプロパティに「absolute」を指定します。
「absolute」が指定された要素は他の要素の位置やサイズの影響を受けなくなるため、複数の要素を重ねて表示する事が可能です。
基準点の位置からの座標をtop・leftあるいはbottomやrightを使って指定します。
.container{
position: relative;
}
#image-1 {
position: absolute;
top: 0;
left: 0;
}
#image-2 {
position: absolute;
top: 0;
left: 0;
}