Create an Image Caption with Absolute Positioning

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