absoluteで複数の画像を重ねる

absoluteで複数の画像を重ねる

著者：

解　説

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

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

XHTML
1
<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>

CSS
1
2
3
4
5
6
7
img {
position: absolute;
}
p{
width:480px;
margin:auto;
}