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

【问题标题】：Firefox position: absolute not returning expected resultsFirefox 位置：绝对没有返回预期结果
【发布时间】：2013-11-09 05:16:47
【问题描述】：

我想在我网页中的图片上叠加一个标签。在标签上使用 position: absolute 和 float: left 在 img 上，我让它在我测试过的所有浏览器中工作——除了 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 在 position:absolute 方面的行为与 Chrome、IE、Safari 和 Opera 不同吗？

这里是my jfiddle of the problem？

【问题讨论】：

杰里米，我还编辑了答案以帮助您解决文本问题。

标签： html css firefox

【解决方案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
}

【讨论】：