0

我想在我的网页中的图片上叠加一个标签。在标签上使用 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 不同吗？

这是我的问题吗？

4

1 回答 1

2

您必须指定更多。 

.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
}
于 2013-11-08T19:37:42.137 回答