This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Learn to use CSS positioning to place a caption and icon over the "Best City Guide" featured image.
Resources
Positioning offsets
Video review
- When you position elements with offset values, a negative offset value moves the element in the opposite direction.
- Instead of moving the positioned element away from the top, right, bottom or left edges of its relative container, a negative value it moves it towards the top, right, bottom or left edges.
- It's best to practice using different positioning offsets and relative containers to see how it affects your layout.
I'm going to use CSS positioning in my
Best City Guide layout to place a caption
0:00
and small location icon on top of
the featured image, like this.
0:05
To follow along using
the latest workspace,
0:10
launch the workspace on this page.
0:12
In the primary column div, I've added
a figure element to contain the image and
0:15
a figcaption element that contains
the text associated with the image.
0:21
When I preview this page in the browser,
0:27
you can see that the caption is
in the normal flow of the page.
0:29
So, it displays below
the image as it should.
0:33
This looks pretty good, but I wanna
position the caption over the image, so
0:35
that it doesn't take up as much
vertical space on the page.
0:39
So there are two things we need to do to
position the caption on top of the image.
0:43
First, we'll position the fake
caption element absolute,
0:48
then we'll set the parent figure element
as the relative positioning context.
0:51
In style.css, I'll scroll down
to the figcaption rule and
0:56
I'm going to add a position property and
set the value to absolute.
1:02
When I refresh the browser,
1:15
notice how the thick caption is now
out of the normal flow of the page.
1:16
So, it's as wide as its content and
it sits above the text on the page.
1:21
To position the caption in relation
to its parent figure element,
1:26
I'll go back to my style sheet and
1:31
give the figure element a position
property and the value relative.
1:34
Next, to place the figcaption
at the bottom edge of the image,
1:39
I'll go back to the figcaption rule and
1:46
give it a bottom offset of zero.
1:50
I'll also set its width to 100%, so
1:54
that it always takes up the full
width of its parent figure element.
1:57
I'll save my style sheet.
2:03
Refresh the browser and it looks perfect.
2:05
So later if I decide I want to position
the caption at the top of the image,
2:08
I can simply change the offset
property from bottom to top.
2:15
I'm going to keep the caption
positioned at the bottom,
2:21
because now I want to place a small icon
above the image using CSS positioning.
2:24
In the index.html file,
2:33
I'm going to add an image element
inside the figure element.
2:35
So right below the opening figure tag,
I'll type image and
2:40
I'm going to give it
the class icon-location.
2:44
Then I'll set the source value
to the location.svg file
2:54
located inside the image
folder of this workspace.
3:00
And I'll simply give it
an alt value of location.
3:10
I'll save my HTML file and
back in style.css,
3:13
I'll scroll down to the page
elements section here and
3:17
I'll create a new rule that
targets the class icon location.
3:22
And I'll set the location
icons width to 35 pixels.
3:33
So the new icon sits above
the image in the normal flow
3:38
of the page since that's how
we coded it in the HTML.
3:43
So now, I'll go back to my CSS and
give the icon a position of absolute.
3:47
When you position elements
with offset values,
3:57
a negative offset value moves
the element in the opposite direction.
4:00
So instead of moving it away from the top,
right, bottom or
4:05
left edges of its relative container,
4:10
it moves it towards the top
right bottom or left edges.
4:13
For example, if I give icon-location
a top offset of -50 pixels and
4:18
a left offset of -50 pixels,
it places the icon 50
4:26
pixels away from the top edge
of the figure element and
4:32
50 pixels away from the left edge.
4:38
I wanna position the icon, so
4:42
that it's slightly offset away from
one of the corners of the image.
4:44
This will create an interesting layout
effect that will draw some attention to
4:47
this featured section of the page.
4:52
Back in my style sheet, I'll change the
top offset value to negative 15 pixels and
4:55
I will also give the left offset
a value of negative 15 pixels.
5:02
Now the icon's positioned in
the top left corner of the image.
5:09
To offset it away from the top
right corner of the image,
5:15
you can simply change
the left offset to right.
5:19
I suggest you practice using
different positioning offsets and
5:30
relative containers to see
how it affects your layout.
5:34
You need to sign up for Treehouse in order to download course files.
Sign up