Absolute positioning has certain limitations by itself,

because the positioning is often in relation to the browser viewport.

Sometimes you wanna place an element in relation to another element, and

even have it stick with that element if it moves in the design.

That's when relative positioning comes in handy.

Absolute and relative positioning work hand in hand.

An element with relative positioning gives you the control

to absolutely position elements anywhere inside of it.

Currently, the positioning offsets of the absolutely positioned ice cream and

tea items are relative to the top-left and bottom-right corners of the browser.

So, the browser view port is their positioning context.

You see, an element with absolute positioning

is always relative to the first parent that has a relative position.

Now, if no parent element has a relative position,

then the browser view port is the positioning context by default.

So, watch what happens when I set a relative positioning context

here in the main header element.

Back in my positioning styles, I'll target main-header.

Then I'll give it a position property, and set the value to relative.

So now, the main header element becomes the positioning context for

the absolutely positioned list items.

And when I refresh the page,

notice how the positioning offsets are now relative to the main header element.

So now, the ice cream item is positioned a hundred pixels away from the top

edge of main header and 50 pixels away from the left edge here.

While tea is positioned 6M or 96 pixels away from the right

edge of main header and 50% away from the bottom edge.

And if I go back to my css and change all the offset values for

both ice cream and tea, to zero.

Once I save and refresh the page, we can see how an offset of zero

places the items at the top left and bottom right corners of main header.

And I can change the positioning context, again,

by making main-nav a relative container.

Back in my css, I'm going to replace the main-header selector with main-nav.

Again, absolutely positioned elements will always be relative

to the first parent that has a relative position.

So now, main-nav is the positioning context for

the absolutely positioned list items.

Even if main-nav moves in the design,

the absolutely positioned list items will stay relative to main-nav's new position.

So for example, I'll go back to my main-nav rule and

add a margin top value of 100 pixels.

And once I refresh the page, notice how the absolutely positioned ice cream and

tea items stay relative to main-nav's new position.

Next, you're going to learn how to apply these positioning concepts to

the best city guide website layout.

I'll show you how to position a caption over an image.

And how to add a fixed navigation to your website