title: Overlay Figcaption on Img
body: <p>I run a website and I am trying to add copyright information to the top-left corner of an image. The <code>img</code> element is <code>float:left;</code> and the <code>figcaption</code> element is located after the <code>img</code> element, but I have a few issues:</p>
  
  <p>1) If I use the <code>position:absolute</code> CSS style on the <code>figcaption</code> element, it will overlay the caption on the image, like I want. However, if I have multiple images listed one after each other, the captions no longer go to the top-left corner and may be positioned in random positions on the page.<a href="https://i.stack.imgur.com/7Ur1V.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7Ur1V.png" alt="enter image description here"></a></p>
  
  <p>2) If I use the <code>position:relative</code> CSS style on the <code>figcaption</code> element, it will place the caption next to the image. This can be fixed when I add <code>left:-410px;</code> to the <code>figcaption</code> CSS because all images are the same width. However, the <code>p</code> element that is setup to wrap beside the <code>img</code> element will leave a gap were the <code>figcaption</code> was originally positioned.<a href="https://i.stack.imgur.com/SUPZW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/SUPZW.png" alt="enter image description here"></a></p>
  
  <p>My question is, how can I get the <code>figcaption</code> in the top-left corner of the <code>img</code> element without affecting the <code>p</code> element's wrapping or indenting?</p>
  
  <hr>
  
  <p>Code sample: <a href="https://jsfiddle.net/ComputerWhiz/mp9sdqq3/1/" rel="nofollow noreferrer">https://jsfiddle.net/ComputerWhiz/mp9sdqq3/1/</a></p>