CSSで画像を重ねる(tableタグ使用）

タグ
<div style="text-align:center"><table width="80%" summary="cssで画像を重ねる" ><tr><td><div style="position:relative"><div style="position:absolute; top:20px; left:-20px"><img style="border:5px solid #0f9" src="img/sakurasouS.jpg" width="164" height="157" alt="桜草小"></div><div style="position:absolute; top:-20px; left:20px"><img src="img/pin.gif" width="50" height="70" alt="ピン"></div><img style="border:15px ridge #0f9" src="img/sakurasou.jpg" width="410" height="349" alt="桜草"></div></td></tr></table></div>

relativeタグ使用

<div style="text-align:center"><div style="position:relative"><div style="position:absolute; top:20px; left:-20px"><img style="border:5px solid #0f9" src="img/sakurasouS.jpg" width="164" height="157" alt="桜草小"></div><div style="position:absolute; top:-20px; left:20px"><img src="img/pin.gif" width="50" height="70" alt="ピン"></div><img style="border:15px ridge #0f9" src="img/sakurasou.jpg" width="410" height="349" alt="桜草"></div></div>

CSSで画像を重ねる3　背景画像使用

<div style="background-repeat: no-repeat;background-image:url(img/sakurasou.jpg);padding:20px"><div style="margin-top:-10px;margin-left:20px"><img src="img/sakurasouS.jpg" width="164" height="157" alt="桜草S"></div><img style="margin-top:-190px; margin-left:30px" src="img/pin.gif" width="50" height="70" alt="ピン"><br><img src="img/toumei.gif"  width="10" height="150" alt="透明gif"></div>