top プロパティについて

質問

昨日「left (right) プロパティについて」という質問をした者です。

質問とご回答は次のとおりです。

＞次のように、ベース画像の上に別の画像をのせて表示させています。

＞<style>
＞<!--
＞ .box { position:relative; left:50%; }
＞ .baseimage { position:relative; z-index:1; left:-225px; }
＞ .image1 { position:relative; z-index:2; left:-100px; top:-200px; }
＞ .image2 { position:relative; z-index:2; left:-100px; top:-300px; }
＞ -->
＞ </style>

＞<div class="box">
＞ <img src="baseimage.jpg" class="baseimage">
＞ <img src="image1.jpg" width="30" height="30" class="image1">
＞ <img src="image2.jpg" width="30" height="30" class="image2">
＞ </div>

＞このとき、image1 と image2 の左端からの距離が一致せず、ずれてしまいます。
＞ それは何故なのでしょうか？
＞ コーディングに問題があるのでしょうか？

＞お教えいただけると幸いです。よろしくお願いいたします。

（以下ご回答）

＞imgがインライン要素であることが原因でずれてしまっているのでは、と思います。
＞ スタイルに以下を追加してみてください。
＞ img{
＞ display:block;
＞ }

ご回答いただいたとおりにすると、横方向にはずれなくなったのですが、

今度は、top プロパティを同じにした画像が縦方向にずれるようになってしまいました。

どちらもずれなくなるようにする方法がありましたら、
ご教示いただきたく、よろしくお願いいたします。

回答No.1

ORUKA1951

そもそも、HTMLをデザインするために書こうとするから、変なところで躓いてしまうのですよ。
　baseimage.jpgは背景と読み取れますが、もしそうならHTMLに記述する必要はありません。
　ベースとなる画像を-255pxで指定して、その上の画像を-100pxで配置されていますがなぜでしょう。
　position:relativeを使用されていますが、その意味から画像を自在に配置するには不向きだと思います。relativeは相対配置で本来配置されるべき位置から移動します。ここはabsoluteを使用すべきです。

[見直こと]
・そもそもその画像の意味はaltで必ず代替テキストを書いてください。必須です。
・それはHTMLの文書構造中なんですか？
　たとえば、図面でしたら
<div class="figure">
　<p><img src="" width="30" height="30" alt="歯車1"></p>
　<p><img src="" width="30" height="30" alt="歯車2"></p>
</div>
　とかだけでよいはずです。

　それが判れば、もっとシンプルで判りやすく、先でどのようにも変更できるし・・

<div class="figure">
<p><img src="image1.jpg" width="30" height="30" alt="歯車1">
<p><img src="image2.jpg" width="30" height="30" alt="歯車2">
</div>
[CSS]
div.figure{width:225px;height:200px;margin:0 auto;position:relative;}
div.figure p img{position:absolute;top:50px;left:100px;}
div.figure p+p img{top:80px;left:130px;}

お礼

ご回答いただきありがとうございます。

とても参考になりました。