css - 位置が絶対的であっても、Web サイトのレイアウトを変更しますか?

Question

これが私のコードです。HTML:

<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic1.jpg" title="Bottle in the   mirror"><img src="images/250-width/pic1.jpg" alt="" width="250px" height="250px"     id="Bottleinthemirrorpic"></a>
<span id="Bottleinthemirror" class="spanlink"><p>Bottle in the mirror<p></span>
</div>

<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic9.jpg" title="The empty glass"><img src="images/250-width/pic9.jpg" alt="" width="250px" height="250px"></a>
</div>

<div class=column1of4>
<a rel="Appendix" href="images/watermarks/watermark_pic10.jpg" title="The last drop"><img src="images/250-width/pic10.jpg" alt="" width="250px" height="250px"></a>
</div>

CSS:

#Bottleinthemirror {
    width: 250px;
    height: 90px;
    position: absolute;
    background-color: rgba(0,0,0,.55);
    margin-top: 10px;
    color: white;
    line-height: 20px;
    font-size: 12px;
}
.column1of4 {
    margin: 50px;
    float: left;    
}

Javascript:

$('#Bottleinthemirror').hide();
$('#Bottleinthemirrorpic, #Bottleinthemirror').hover(function(){
 //in
  $('#Bottleinthemirror').show();

},function(){
 //out
 $('#Bottleinthemirror').hide();
});

基本的に、私は 3 つの写真を持っています。そのうちの 2 つは横に並んでいて、3 番目の写真は最初の写真の下にあります。最初の写真にカーソルを合わせると、 #bottleinthemirror スパンが表示されます。問題は、スパンが非表示になっている場合でも、Web サイトのレイアウトを再配置し、位置が絶対に設定されていても、その下の画像を別の場所に移動することです。理由はありますか？スパンを削除すると、Web サイトのレイアウトは正常です。スパン位置が絶対なのに、スパンを入れると変わる。

Answer 1

おそらく問題は をspan含むことができないことpであり、コードには技術的に 2 つpの要素がありますspan(両方のpタグが開いています)。ブラウザーがこの不適切なマークアップを修正すると、最後の一部pがspan. p内部にが必要な場合は、の代わりに.spanlink使用することをお勧めします。しかし、ここで本当に必要ですか？divspanp

Answer 2

追加

display: block;

に

#Bottleinthemirror