解決済み

CSS 配置 Absolute、Margin

  • すぐに回答を!
  • 質問No.5836943
  • 閲覧数339
  • ありがとう数1
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 0% (0/33)

お世話になります。

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

ベストアンサー率 57% (1008/1745)

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


<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 の値変更で上下左右微調整するだけ。
他にも色々方法があるが。
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

ピックアップ

ページ先頭へ