absoluteで複数の画像を重ねる

HTML&CSS

p要素の中に複数の画像をimgタグで挿入します。
通常なら横並びに画像が並ぶはずです。
ここでimg要素にposition : absoluteを設定します。
位置は特に指定をしません。
そうするとimgで挿入した画像がきれいに重なります。
後は画像のサイズを少しずつ変えてみるとか、JavaScriptで動かすなど工夫しだいです。

absoluteで複数の画像を重ねる参考例

<p><img src="cake1.jpg" width="480" height="360"><img src="cake2.jpg" width="480" height="360"><img src="cake3.jpg" width="480" height="360">a</p> 
img {
	position: absolute;
}
p{
	width:480px;
	margin:auto;
}
スポンサーリンク

お勧め書籍

AI関連

Python

JavaScript

HTML CSS関連

統計学

HTML&CSS
スポンサーリンク
dororoをフォローする
IT工房|AI入門とWeb開発
タイトルとURLをコピーしました