![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
No.2ベストアンサー
- 回答日時:
position:relativeでずらした時の余白でしたら、ページ全体かどうかはともかく
それが含まれる部分についてはボックスで囲う必要があるかと思います。
唯一マージンでずらせば、ずれる前の領域は余白となりませんが
扱いが難しく、また、MAC版IEではマージンの負数には未対応です。
まだ全体像が理解できていないのですが、とりあえず・・・
何パターンかサンプル書いてみたので参考になれば。(なるのかな??)
<html>
<head>
<title>画像を重ねるテスト</title>
<style type="text/css">
<!--
dt{margin-top:2em;}
dd {background:#ccc;}
#img2 {margin-top:-25px;margin-left:50px;}
#img3 {margin-top:-25px;margin-left:100px;}
#layer2 {position:relative;height:100px;}
#img5 {position:absolute;top:25px;left:50px;}
#img6 {position:absolute;top:50px;left:100px;}
#layer3 {height:100px;overflow:hidden;}
#img8 {position:relative;top:-25px;left:50px;}
#img9 {position:relative;top:-50px;left:100px;}
-->
</style>
</head>
<body>
<h1>画像を重ねるテスト</h1>
<dl>
<dt>1.負数のマージン<samp>(margin:-xx)</samp>で重ねる(MacIEではNG)</dt>
<dd>
<img src="~" alt="" width="100" height="50" id="img1"><br>
<img src="~" alt="" width="100" height="50" id="img2"><br>
<img src="~" alt="" width="100" height="50" id="img3">
</dd>
<dt>2.絶対配置<samp>(position:absolute)</samp>で重ねる</dt>
<dd id="layer2">
<img src="~" alt="" width="100" height="50" id="img4">
<img src="~" alt="" width="100" height="50" id="img5">
<img src="~" alt="" width="100" height="50" id="img6">
</dd>
<dt>3.相対配置<samp>(position:relative)</samp>で重ね、余分な部分は見せない<samp>(overflow:hidden)</samp></dt>
<dd id="layer3">
<img src="~" alt="" width="100" height="50" id="img7"><br>
<img src="~" alt="" width="100" height="50" id="img8"><br>
<img src="~" alt="" width="100" height="50" id="img9">
</dd>
</dl>
<p>以上、3パターン</p>
</body>
</html>
No.1
- 回答日時:
ボックスの位置を変えるといっても色々なケース、やり方がありますので、現在どのようになっていて、どの辺りが問題なのか、具体例(できれば実例)を挙げてもらえると何かアドバイスができるかもしれません。
この回答への補足
具体的には
最初に画像をごく普通に数枚<img src="">で並べます
そしてそれぞれの画像に相対位置を設定して1番最初においた画像に2枚目以降の画像を重ねていきます
すると、2枚目以降の画像があった場所、相対位置を設定する前の位置(0px,0px)に余白ができます
視覚的には何もない余白です。スクロールバーして下まで見ることができますがもちろん何もない余白です
この余白はかっこ悪いので消したいわけです
説明が下手だったかもしれませんがよろしくお願いします
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Windows 10 タスクバー上に表示されたアドレス・ボックス? 1 2023/04/30 17:37
- Word(ワード) ワード2019で、テキストボックスの位置を、左右の真ん中にする方法 1 2022/09/21 13:49
- Excel(エクセル) エクセル シート内のボックスを縦並びから横並びに 7 2023/04/05 04:28
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- 家具・インテリア 収納について教えてください 1 2022/11/19 20:44
- Excel(エクセル) [クイックアクセスツールバー]の設定ファイルの格納場所について、 5 2023/04/21 14:43
- 郵便・宅配 アマゾンの配達員がひどい 3 2022/11/08 18:49
- 郵便・宅配 マンションの宅配ボックスの場所について Amazonで注文した品物を手渡しで受け取る際にAmazon 4 2022/06/14 09:52
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- パズドラ パズドラ 2 2022/06/06 16:07
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
水面の波紋
-
cssで、チェックボックスの画像...
-
画像のサイズが変わらない
-
画像の横に文字をうまく配置で...
-
inputタグでサーバにデータを送...
-
Dreamweaverの閉じタグでスラッ...
-
画像の場合のみ、下線を消す方...
-
htmlで画像を2個ずつ並べていき...
-
画像をクリックして同じページ...
-
HTMLのIMAGEに。。
-
リンクを知らせる手のマークが...
-
ポップアップウィンドウのサイ...
-
imgタグは何で囲むのが良いか
-
favicon.ico はもういらない?
-
リンク画像のラインを消したい
-
レスポンシブ対応のHTML・CSS(...
-
ボタンをセル内一杯に表示させ...
-
htmlの文字が縦書きになる
-
HTML属性での「""」 「''」違い
-
リストマーカーをボックス内に...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンをセル内一杯に表示させ...
-
リンクを知らせる手のマークが...
-
htmlで画像を2個ずつ並べていき...
-
ポップアップウィンドウのサイ...
-
画像のサイズが変わらない
-
XML画像データををHTMLで簡単に...
-
【HTML/CSS】ボタンの枠が伸び...
-
UDP通信を使うチャットプログラ...
-
リンクを選択したときの青い枠...
-
favicon.ico はもういらない?
-
table で画像をピッタリとくっ...
-
CSSの左横に隙間ができてしまい...
-
HTMLのIMAGEに。。
-
ホームページで画像を横に並べ...
-
画像とテーブルの隙間をなくす。
-
リンクをつけた画像をクリック...
-
HTMLは、シングルクォートかダ...
-
縦長広告をウェブページの右側...
-
c言語を用いて画像の透明度をあ...
-
ホームページタグ打ち。サイズ...
おすすめ情報