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
Absolute positioning has certain limitations by itself because the positioning is often in relation to the browser viewport. Sometimes you want to 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.
Resources
Positioning offsets
Video review
- Absolute and relative positioning work hand in hand.
- An element with relative positioning gives you the control to absolutely position elements anywhere inside it.
- An element with absolute positioning is always relative to the first parent that has a relative position.
- If no parent element has a relative position, the browser viewport is the positioning context by default.
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
You need to sign up for Treehouse in order to download course files.
Sign up