Positioning Elements Relative to Other Elements

Absolute positioning has certain limitations by itself, 0:00 because the positioning is often in relation to the browser viewport. 0:03 Sometimes you wanna place an element in relation to another element, and 0:08 even have it stick with that element if it moves in the design. 0:12 That's when relative positioning comes in handy. 0:16 Absolute and relative positioning work hand in hand. 0:18 An element with relative positioning gives you the control 0:22 to absolutely position elements anywhere inside of it. 0:26 Currently, the positioning offsets of the absolutely positioned ice cream and 0:29 tea items are relative to the top-left and bottom-right corners of the browser. 0:35 So, the browser view port is their positioning context. 0:41 You see, an element with absolute positioning 0:45 is always relative to the first parent that has a relative position. 0:47 Now, if no parent element has a relative position, 0:52 then the browser view port is the positioning context by default. 0:56 So, watch what happens when I set a relative positioning context 1:00 here in the main header element. 1:04 Back in my positioning styles, I'll target main-header. 1:07 Then I'll give it a position property, and set the value to relative. 1:14 So now, the main header element becomes the positioning context for 1:20 the absolutely positioned list items. 1:26 And when I refresh the page, 1:29 notice how the positioning offsets are now relative to the main header element. 1:31 So now, the ice cream item is positioned a hundred pixels away from the top 1:36 edge of main header and 50 pixels away from the left edge here. 1:42 While tea is positioned 6M or 96 pixels away from the right 1:49 edge of main header and 50% away from the bottom edge. 1:54 And if I go back to my css and change all the offset values for 1:59 both ice cream and tea, to zero. 2:03 Once I save and refresh the page, we can see how an offset of zero 2:12 places the items at the top left and bottom right corners of main header. 2:17 And I can change the positioning context, again, 2:27 by making main-nav a relative container. 2:31 Back in my css, I'm going to replace the main-header selector with main-nav. 2:35 Again, absolutely positioned elements will always be relative 2:43 to the first parent that has a relative position. 2:47 So now, main-nav is the positioning context for 2:51 the absolutely positioned list items. 2:54 Even if main-nav moves in the design, 3:04 the absolutely positioned list items will stay relative to main-nav's new position. 3:07 So for example, I'll go back to my main-nav rule and 3:13 add a margin top value of 100 pixels. 3:18 And once I refresh the page, notice how the absolutely positioned ice cream and 3:23 tea items stay relative to main-nav's new position. 3:28 Next, you're going to learn how to apply these positioning concepts to 3:35 the best city guide website layout. 3:38 I'll show you how to position a caption over an image. 3:41 And how to add a fixed navigation to your website 3:44