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.

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.

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

Resizing an image with six corners using the canvas technique

Seeking a light-weight, text-rich editor specifically designed for use on our enterprise website. This editor should be even lighter than TinyMCE

Conflicting events arising between the onMouseUp and onClick functions

How to insert an image into a placeholder in an .hbs Ember template file

Personalized Firefox Scrollbar - Rounded Corners

Personalizing Web Push Alerts (Google Chrome)

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

What is the best way to set the z-index for elements within CSS containers that are utilized for container queries?

Is it possible for URLs in CSS Custom Properties to be relative to the CSS file where they are defined?

Strategies for avoiding text wrapping in Bootstrap labels on Firefox

Is there an HTML editing tool that has the ability to collapse code blocks by tags and rearrange them?

Tips for creating responsive elements with a z-index of 1 in CSS

Click here to start your Django download now

Is one round the limit for my JavaScript image slider?

How to perfectly align responsive email on iPhone 6

A slender gap of white space delicately separates the transformed parent from its offspring

preserve functionality when switching between pages

PHP HTML failing to recognize "mandatory" attributes

Fresh sheet with a view through the window

Designing divs that intersect