Position the Figcaption over the Image

Question

Position the Figcaption over the Image

Running a website, I am facing an issue with adding copyright information to the top-left corner of an image. The img element is set to float:left; and the figcaption appears after it. However, there are some complications:

1) Using the position:absolute CSS style on the figcaption element overlays the caption on the image as desired. Yet, when multiple images are listed consecutively, the captions do not align to the top-left corner but appear randomly on the page.https://i.sstatic.net/7Ur1V.png

2) Employing the position:relative CSS style on the figcaption element positions the caption beside the image. To resolve this, left:-410px; has been added to the figcaption CSS due to consistent image width. However, the p element wrapping next to the img results in a gap left by the initial position of the figcaption.https://i.sstatic.net/SUPZW.png

The main question remains: how can the figcaption be placed in the top-left corner of the img element without impacting the wrapping or indenting of the p element?

Code sample: https://jsfiddle.net/ComputerWhiz/mp9sdqq3/1/

html css image

Answer 1

Answer №1

Here is the solution you are looking for:

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>

The correct positioning for the <figcaption> element would be absolute, while the <figure> element should be positioned relatively. This way, absolutely positioned elements are placed in relation to their closest positioned ancestor, hence the need for relative positioning on the figure. Then, it's advisable to float the figures instead of the images.

Answer 2

Here is the solution you are looking for:

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>

The correct positioning for the <figcaption> element would be absolute, while the <figure> element should be positioned relatively. This way, absolutely positioned elements are placed in relation to their closest positioned ancestor, hence the need for relative positioning on the figure. Then, it's advisable to float the figures instead of the images.

Position the Figcaption over the Image

Answer №1

Similar questions

Achieving overlapping of a <div> element with a "position: fixed" container while enabling vertical scrolling of the fixed container's content

Using a combination of radio buttons and JavaScript to adjust the color of a div element

Utilizing numerous 'select' HTML elements with Vue.js and Materializecss

Expanding content will not cause Flexbox to stretch

What's the issue with the submit button not functioning on the form?

Angular silhouette casting on CSS fold

The JavascriptExecutor is unable to access the 'removeAttribute' property of a null object

Change the location of an HTML element within the page structure

Attempting to grasp the fundamentals of angular Routing, however, upon attempting to reload the page, nothing appears to be displayed

What is the proper way to add process.env.PORT to the script declarations string within my package.json file?

Exploring new classes with jQuery's .not() and :not()?

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

Creating a dynamic text design using Bootstrap or CSS: What's the best approach?

determining the number of td elements in a row of a table located within an iframe

Developing a slideshow with PHP and JQuery

Instant access to an interactive online platform

Creating tiles that can be easily stacked to the side

CSS layout: The full-width header should align its left margin with the centered content-div

Issue with jQuery incorrectly calculating height post-refresh

Troubleshooting a problem with CSS Matrix animations