CSSで画像を同じ位置に重なり合わせるには?
お世話になります。
2枚のTOP画像(一枚は差し替え可能なJPG、もう一枚はその画像の上に位置するフレーム枠のような役割を果たすGIF画像)をぴったり重ね合わせて配置したいと考えています。
調べたところz-indexという方法があるらしく、position:relativeしてtop,left指定でいろいろ試してみたのですが、上に重なる画像の分だけ、下部コンテンツに空きが出ます。(添付画像のような現象です)
これはCMS化して画像を差し替える時のためにページなのですが、こういう現象をなくして普通のWebサイトページのように配置することはできないのでしょうか?
素人ゆえおかしな質問しているかもしれませんが、どうかご教授お願いします。
現時点のHTML/CSSはこんな感じです。
HTML---
<div id="contens">
<div id="top_img_a">
<p class="img_top"><img src="images/dammy_img02.jpg" alt="新規投稿ダミー画像" /></p>
<p class="flame"><img src="images/new_entries_img_flame.gif" alt="新規投稿フレーム枠" /></p>
</div>
CSS---(本意ではありませんが、やむなくtop,left調整で位置を作っている段階です。)
#top_img_a {
width:900px;
margin:0;
padding:0;
position:relative;
top:0px;
}
.img_top {
position:relative;
z-index:1;
top:0;
left:25px;
}
.flame {
position:relative;
z-index:2;
top:-216px;
left:25px;
}
お礼
わかりやすい回答ありがとうございました・ 参考になりました。