html - 在 Img 上叠加 Figcaption

Question

我经营一个网站，我试图将版权信息添加到图像的左上角。 img 元素是 float:left; 并且 figcaption 元素位于 img 元素之后，但是我有几个问题:

1) 如果我在 figcaption 元素上使用 position:absolute CSS 样式，它将像我希望的那样在图像上覆盖标题。但是，如果我有多个图像一个接一个地列出，标题将不再位于左上角，并且可能位于页面上的随机位置。

2) 如果我在 figcaption 元素上使用 position:relative CSS 样式，它会将标题放在图像旁边。当我将 left:-410px; 添加到 figcaption CSS 时可以解决这个问题，因为所有图像的宽度都相同。但是，设置为环绕在 img 元素旁边的 p 元素将在 figcaption 最初定位的位置留下间隙。

我的问题是，如何在不影响 p 元素换行的情况下获取 img 元素左上角的 figcaption还是缩进？

---

代码示例:https://jsfiddle.net/ComputerWhiz/mp9sdqq3/1/

Answer 1

我相信这就是您所追求的:

img {
  width: 400px;
  clear: left;
  margin-bottom: 1px;
  margin-right: 10px;
}

figcaption {
  background-color: black;
  color: white;
  max-width: 400px;
  font-size: 10px;
  display: block;
  float: left;
  position: absolute;
  top: 0;
}

figure {
  position: relative;
  float: left;
}

<figure><img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg">
  <figcaption>Copyright Here</figcaption>
</figure>
<figure><img src="http://www.aviatorcameragear.com/wp-content/uploads/2012/07/placeholder.jpg">
  <figcaption>Copyright Here</figcaption>
</figure>
<p>This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected
  by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should
  not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around
  the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should
  be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.This
  test should be wrapped around the image and should not be affected by the figcaption.This test should be wrapped around the image and should not be affected by the figcaption.</p>

您应该定位 <figcaption>绝对元素，然后定位 <figure>相对地。绝对定位的元素是相对于它们最近的定位祖先定位的，这就是你想要在图形上进行相对定位的原因。然后， float 图形而不是图像。