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();
});

基本上，我有三张照片，其中两张在彼此旁边，第三张在第一张照片下面。我将鼠标悬停在第一张图片上，我希望#bottleinthemirror span出现，它就是这样。问题是，即使隐藏了跨度，它仍然会重新排列网站的布局，并将其下方的图片移动到另一个位置，即使它的位置设置为绝对。知道为什么吗？当我删除跨度时，网站布局是正常的。当我放入跨度时它会发生变化，即使跨度位置是绝对的。

Answer 1

问题可能是span不能包含p，而且在您的代码中，p中有两个span元素（p标签正在打开）。当浏览器修复此错误标记时，最后一个p的一部分可能会显示在span之外。如果p内需要.spanlink，最好使用div代替span。但p真的有必要吗？

Answer 2

我在jsfiddle中设置了这个：http://jsfiddle.net/r2XG2/1/它似乎在Chrome中为我工作。你在哪个浏览器？如果它仍然不适合你，我会尝试以下方法：

设置z-index: 100以查看是否会强制它显示在其他元素上。您还可以尝试在css中设置top或left值，这也可能会强制它出现在正确的位置。添加display: block;也不会有任何影响。

编辑：更新了来自asker的最新更新小提琴，它似乎也不会加载jsfiddle。我将position: relative添加到父div，看看是否有帮助。

#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;
    z-index: 100;
    display: block;
}

.column1of4 {
    margin: 50px;
    float: left;
    position: relative;
}

Answer 3

添加

display: block;

到

#Bottleinthemirror

<span>即使位置是绝对的，也会改变网站的布局？</span>

3 个答案: