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
Fixed positioning is a lot like absolute positioning, with two exceptions. An element with fixed positioning is always relative to the viewport, not to any parent elements, and stays in a fixed place on the screen. So how about sticky positioning? That one’s an interesting mixture of relative and fixed positioning.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In our last video,
we covered absolute positioning.
0:01
Fixed positioning is a lot like absolute
positioning, with two exceptions.
0:05
An element with fixed positioning
is always relative to the viewport,
0:11
not to any parent elements.
0:16
And fixed elements stay in place
even while the page is scrolling.
0:18
Just to demonstrate, let's see what
happens if we set our figcaption
0:24
from our last exercise to fixed,
rather than absolute positioning.
0:29
Now, the figcaption is 100%
of the width of the viewport,
0:37
and is positioned at the bottom.
0:42
The fact that the parent element
figure is set to a relative
0:45
positioning doesn't have any impact
on a fixed position element.
0:50
Also as we scroll up and down,
notice that the figcaption stays in
0:55
a fixed place on the screen,
where content with absolute
1:00
positioning scrolls with
the rest of the document content.
1:04
This is where fixed
positioning gets its name.
1:09
This is also a pretty good
illustration of CSS stacking,
1:14
which uses a property
called z-index to allow
1:19
developers to stack CSS
boxes on top of one another.
1:24
When absolute or fixed positioning breaks
content from the normal document flow,
1:28
it allows you to position that content
in front of or behind other content.
1:35
Elements with a higher z-index are stacked
on top of elements with a lower z-index.
1:42
For example, let's try setting
the z-index of our figcaption to -1.
1:49
Now, our caption is behind
the rest of our document content,
2:00
which has a default z-index of 0.
2:05
The figcaption looked better before
these changes, so I'm going to undo them.
2:10
And instead apply fixed positioning
to developer Diane's header.
2:17
While positioning it so it touches
the top left corner of the viewport.
2:26
That worked, but
there's a few issues relating to the fact
2:40
that fixed content leaves
the normal document flow.
2:45
One is that the width is no longer 100%,
but we can fix that easily enough.
2:49
The adjustments we made earlier to
the margin are no longer necessary,
3:03
since the header is no longer being
affected by the normal document flow.
3:10
I'm also going to erase
the height declaration.
3:16
It's awkward having a fixed element take
up 25% of the height of the viewport.
3:20
That looks better, but
when our page loads,
3:30
the start of Diane's Blog
post is still covered up.
3:34
The fixed header has a higher z-index
than the rest of the document content.
3:38
And with the header removed from
the normal document flow Diane's post
3:44
starts at the top of the viewport.
3:48
We can solve this by adding a bit
of extra space at the top of our
3:53
article to account for the fixed header.
3:58
So how about sticky positioning,
4:12
that one's an interesting mixture
of relative and fixed positioning.
4:14
To try it out, I'm going to create
a banner in between sections in
4:20
Diane's article just to
capture some visual attention.
4:25
And we'll add a bit of styling similar
to what we use to style our header.
4:42
Hopefully, you'll recognize
many of these declarations.
5:21
Since we are styling this
similar to our header,
5:25
you might even think of ways to reduce the
amount of CSS using the DRY principle.
5:29
Okay, so that is a fun looking
banner in the browser, but
5:37
nothing too special just yet.
5:42
Let's add two more lines to our CSS rule.
5:45
When we first refresh the page, the banner
isn't at the top of the viewport, is it?
5:56
The measurements you include in sticky
positioning represent a threshold.
6:02
If the user scrolls past a certain point,
6:07
then we'll give the element
fixed positioning.
6:11
Let's see what happens when we scroll.
6:15
And look at that,
once we scroll down far enough that
6:20
the banner reaches the top of
the viewport it sticks and
6:25
it remains there until the user
scrolls far back up enough.
6:30
The banner we've created is
currently on top of our header.
6:35
So of course, we could use z-index if we
would like to change their stacking order.
6:39
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up