I'm going to use CSS positioning in my Best City Guide layout to place a caption

and small location icon on top of the featured image, like this.

To follow along using the latest workspace,

launch the workspace on this page.

In the primary column div, I've added a figure element to contain the image and

a figcaption element that contains the text associated with the image.

When I preview this page in the browser,

you can see that the caption is in the normal flow of the page.

So, it displays below the image as it should.

This looks pretty good, but I wanna position the caption over the image, so

that it doesn't take up as much vertical space on the page.

So there are two things we need to do to position the caption on top of the image.

First, we'll position the fake caption element absolute,

then we'll set the parent figure element as the relative positioning context.

In style.css, I'll scroll down to the figcaption rule and

I'm going to add a position property and set the value to absolute.

When I refresh the browser,

notice how the thick caption is now out of the normal flow of the page.

So, it's as wide as its content and it sits above the text on the page.

To position the caption in relation to its parent figure element,

I'll go back to my style sheet and

give the figure element a position property and the value relative.

Next, to place the figcaption at the bottom edge of the image,

I'll go back to the figcaption rule and

give it a bottom offset of zero.

I'll also set its width to 100%, so

that it always takes up the full width of its parent figure element.

I'll save my style sheet.

Refresh the browser and it looks perfect.

So later if I decide I want to position the caption at the top of the image,

I can simply change the offset property from bottom to top.

I'm going to keep the caption positioned at the bottom,

because now I want to place a small icon above the image using CSS positioning.

In the index.html file,

I'm going to add an image element inside the figure element.

So right below the opening figure tag, I'll type image and

I'm going to give it the class icon-location.

Then I'll set the source value to the location.svg file

located inside the image folder of this workspace.

And I'll simply give it an alt value of location.

I'll save my HTML file and back in style.css,

I'll scroll down to the page elements section here and

I'll create a new rule that targets the class icon location.

And I'll set the location icons width to 35 pixels.

So the new icon sits above the image in the normal flow

of the page since that's how we coded it in the HTML.

So now, I'll go back to my CSS and give the icon a position of absolute.

When you position elements with offset values,

a negative offset value moves the element in the opposite direction.

So instead of moving it away from the top, right, bottom or

left edges of its relative container,

it moves it towards the top right bottom or left edges.

For example, if I give icon-location a top offset of -50 pixels and

a left offset of -50 pixels, it places the icon 50

pixels away from the top edge of the figure element and

50 pixels away from the left edge.

I wanna position the icon, so

that it's slightly offset away from one of the corners of the image.

This will create an interesting layout effect that will draw some attention to

this featured section of the page.

Back in my style sheet, I'll change the top offset value to negative 15 pixels and

I will also give the left offset a value of negative 15 pixels.

Now the icon's positioned in the top left corner of the image.

To offset it away from the top right corner of the image,

you can simply change the left offset to right.

I suggest you practice using different positioning offsets and

relative containers to see how it affects your layout.