Preview
Video Player
00:00
00:00
Relative and Absolute Positioning
8:14The position property in CSS sets how an element is positioned in a document. All HTML elements have a position value of static by default, which means positioning is determined by the normal flow of content in the HTML document. In other words, if you have a heading with a paragraph beneath it, and a bulleted list below that paragraph, that’s exactly the order the content will appear in the browser. But what other options do we have for positioning content?
By default, the position of elements
on the page is determined by
0:00
the normal flow of content
in the HTML document.
0:05
In other words, if you have a heading
with a paragraph beneath it,
0:10
and a bulleted list below that paragraph,
0:14
that's exactly the order that
content will appear in the browser.
0:16
CSS provides various options for
positioning content.
0:22
In this video,
I'll teach you how to position elements in
0:26
the document using the position property.
0:31
I'm looking at the MDN
documentation on CSS positioning.
0:35
The default value is static, which means
the element is positioned according to
0:41
the normal flow of the document.
0:46
In addition, we're able to work
with values called relative,
0:49
absolute, fixed, and sticky.
0:55
Relative positioning is pretty
similar to static positioning.
1:00
As an element set to relative positioning
will still be positioned according
1:05
to the document flow.
1:10
If we set our h1 element
to position: relative,
1:12
We don't see any changes
in our browser preview.
1:29
However, relative positioning
also allows us to offset
1:33
the position of an element
relative to itself.
1:38
We can use properties called top,
right, bottom,
1:42
and left to adjust the positioning
of a relatively positioned element.
1:47
Here, we've moved our h1 element 60
pixels over from the normal left edge.
1:56
Notice that unless we make some sort of
adjustment to the width of this element,
2:04
it's causing horizontal scrolling.
2:09
It's still 100% of the width of
the parent, but moved over 60 pixels.
2:12
You might be thinking,
2:22
"Hmmm. I don't know how often
I'd use positioning to do that.
2:23
It seems better to work with margin and
padding, right?"
2:27
And I agree, so let's see if we can't come
up with a more useful demonstration of
2:31
relative positioning.
2:36
But to do that, let's first take
a look at absolute positioning.
2:38
Absolute positioning removes an element
from the normal document flow.
2:44
And by default,
2:49
allows you to position the element
based on the edges of the viewport.
2:50
Previewing this in the browser,
3:07
we can see that the h1 element has indeed
been removed from the document flow.
3:09
The area above Diane's introductory
paragraph no longer has a heading,
3:15
does it?
3:20
Instead, the heading is now 20 pixels
from the top of the viewport, and
3:21
10 pixels from the right
edge of the viewport.
3:26
The element no longer defaults to
being as wide as the rest of our HTML
3:30
content because it's no longer
part of the same document flow.
3:36
If we add width: 100% to our CSS rule,
3:41
The h1 is now the same
width as the viewport.
3:49
Okay, so that by itself might
not be super useful either.
3:54
And I'm going to delete the rule
I've created for the h1 element.
3:59
But now that we've covered both
relative and absolute positioning,
4:05
we can combine them to create
something interesting.
4:09
When I introduced absolute positioning,
I mentioned that by default,
4:13
elements will be positioned based
on the edges of the viewport.
4:18
However, looking back at the MDN docs,
absolute positioning is
4:23
actually defined as positioned relative
to the closest positioned ancestor.
4:28
In other words, if a parent element
uses relative positioning, we
4:35
can use absolute positioning to position
a child element relative to the parent.
4:41
For example, let's create a caption for
Diane's bio image.
4:49
We'll use the figure and
figcaption elements in our HTML to do so.
4:55
And I'll just reuse my alt
description to create the figcaption.
5:11
By default, the figure element has 40
pixels of margin on the left and right.
5:27
We can eliminate that, but what I'm really
5:33
interested in doing is using relative and
5:38
absolute positioning to place the caption
5:43
on top of developer Diane's image.
5:48
When we set the figure's
position property to relative,
5:57
nothing happens immediately.
6:04
But since figure is the parent
of the figcaption element,
6:09
we can now use absolute positioning
to place the caption over the image.
6:13
Pretty cool, right?
6:41
The caption is 20 pixels from
the bottom edge of the image.
6:42
The only issue is that the caption
is wider than the image.
6:46
I'll give you a moment to see
if you can use your element
6:52
inspector to figure out why.
6:55
Did you get it?
7:01
That was a tough question.
7:03
The issue is, the image element
has a max width of 480 pixels.
7:05
But the figure element is allowed to
extend all the way across the viewport.
7:13
The figcaption element is
the same width as its parent,
7:19
which is the figure element.
7:24
There are a variety of
ways we could fix this.
7:27
One way would be to add figure to the CSS
rule containing the max-width declaration.
7:30
Which would prevent both the figure and
7:38
the image from going
wider than 480 pixels.
7:42
But if you found another solution,
that's great.
7:49
CSS layout challenges rarely
offer only one solution.
7:53
So far, in addition to
the default static positioning,
7:59
we've covered absolute and
relative positioning.
8:03
We'll take a look at our remaining
positioning values, fixed and sticky,
8:07
in our next video.
8:12