CSS 配置 Absolute、Margin

質問

お世話になります。

CSSを使用してWebサイトを作成しているのですが、ある画像の上にもう一つの画像を重ねたいと思っています。そんな時まず後ろの画像を配置し、その次に上に重ねる画像をPosition:absolute; margin:xxpx;
として表示させています。IE以外で表示されるのと、IEで表示される位置が違うので困っています。

とりあえず画像の表示方法は以下のよう

HTML
<div id="a">
<img src="aaa.jpg">
<div id="b"></div></div>

CSS
#a
{float:left; overflow:hidden;}

#b {position:absolute; margin:-40px; height:10px; width:20px; background:url(aa.jpg);}

IEすべて同じように表示されるのかと思いましたが、今日学校のPCで見たところ、IE以外のブラウザで表示されるのと同じように表示されていました。

今のところはIEのみのCSSとその他のCSSとの設定でやりくりしていますが、すべてのブラウザでどんな場合も同じように（まったく同じは無理だとは思いますが）表示させる方法を教えてください。

CSSを使い分けたりするのではなく。一つのCSSだけで；

回答No.1

naokita · ベストアンサー

情報不足なので正確には回答出来ない。それだけ表示させてどうなる？

<div style="background: url(aaa.jpg) no-repeat; height: 背景画像の高さpx; width: 背景画像の幅px;">
<img src="aa.jpg" height="10" width="20" alt="上の画像" style="margin: 40px 0 0 40px;">
</div>

背景画像の大きさを設定し、例の 40px の値変更で上下左右微調整するだけ。
他にも色々方法があるが。