Question

我想在我的网页上的图片上叠加标签。在标签上使用position：absolute和在img上使用float：我让它在我测试它的所有浏览器中工作 - 除了Firefox（3和4）。

以下是html的基本外观：

<h3>Header</h3>

<div class="wrapper">   
    <span class="img-title">OVERLAY LABEL</span>    
    <img src="pic.jpg">
    <div class="text">
        <p>Some text about the lovely picture goes here</p>
    </div>
</div>

<p>Footer bits</p>

和CSS：

.wrapper { 
    overflow: auto; 
}
.img-title { 
    position: absolute; 
}
img { 
    float: left; 
}

有人可以告诉我为什么Firefox的行为与Chrome，IE，Safari和Opera在位置方面的表现方式不同？绝对？

这是my jfiddle of the problem？

Answer 1

您必须指定更多。

.wrapper { 
    border:1px solid red;
    overflow: auto; 
    position: relative;
}
.img_title { 
    position: absolute; 
    top:0;
    left: 0;
}
img { 
    float: left; 
}

要绝对定位image_title，但相对于包装器，包装器必须相对定位。此外，您还必须指定绝对定位标题的顶部和左侧位置。

<强>更新您的文字未显示在顶部，与图片对齐，因为<p>标记上有一些填充或边距。您可以通过以下方式修复它：

.text p {
    margin: 0; padding: 0
}

Firefox的位置：绝对没有返回预期的结果

1 个答案: