在Img上覆盖Figcaption

Question

我运行一个网站,我试图将版权信息添加到图像的左上角.该img元素是float:left;和figcaption元件位于后img元素,但我有几个问题:

1)如果我position:absolute在figcaption元素上使用CSS样式,它将覆盖图像上的标题,就像我想要的那样.但是,如果我一个接一个地列出多个图像,则字幕不再位于左上角,可能位于页面上的随机位置.

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

我的问题是,如何figcaption在img不影响p元素包装或缩进的情况下获取元素的左上角？

---

代码示例: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>相对定位.绝对定位的元素相对于它们最接近的位置祖先定位,这就是为什么你想要在图上的相对定位.然后,浮动数字而不是图像.