css - 在css中覆盖其他项目的项目是否有负边距的替代方法？

Question

我有这样的标记：

<p>Image caption</p><img />

p 是一个内联块。

我希望标题覆盖图像，而不是将图像推到左侧。通常我使用 margin-right -"x"px; 来执行此操作，但由于我不知道图像标题的宽度，我不能使用这种技术。有什么好的选择吗？（文本有背景色，所以我不能使用块元素）

score 1 · Accepted Answer

您是否考虑过绝对定位相对定位的 div 内的项目？

例如，将 p 和 img 包装在一个 div 中并添加 position:relative 到 div 然后添加 position:absolute 到 p 和 img 并左或右定位这些元素。

score 0 · Accepted Answer

在它周围放一个div：

<div><p>Image caption</p><img /></div>

指定的宽度div并允许位于的img顶部p。然后，您可以padding: 0 auto;在 div 上使用以使图像居中。

score 0 · Accepted Answer

我会将 p 和 img 包装在一个 div 中。

<div>
<p>Image caption</p>
<img /> 
</div>

然后使用以下样式：

div {
  position: relative;
  float:left;
}
p {
  position: absolute;
  top: 20px;
  left: 10px;
}

您可以相应地调整顶部和左侧的值，如果您愿意，还可以使用底部或右侧而不是顶部和左侧。

score 0 · Accepted Answer

另一种选择是使用固定大小的 div 并将您的图像用作背景？这样，任何文本都将被覆盖，而无需使用绝对定位和相对定位。垫

score 0 · Accepted Answer

此处编写的解决方案不适用于我的网站（尽管在技术上是正确的）

我的解决方案是

<p>
    <span>Image caption<span>
</p>
<img />

进而

p{
    display:block;
    margin-right -100%;
}

一些额外的标记，但希望它会帮助有人走上和我一样的道路！

5 回答 5