1
00:00:01,104 --> 00:00:05,366
In our last video,
we covered absolute positioning.

2
00:00:05,366 --> 00:00:11,254
Fixed positioning is a lot like absolute
positioning, with two exceptions.

3
00:00:11,254 --> 00:00:16,578
An element with fixed positioning
is always relative to the viewport,

4
00:00:16,578 --> 00:00:18,716
not to any parent elements.

5
00:00:18,716 --> 00:00:24,793
And fixed elements stay in place
even while the page is scrolling.

6
00:00:24,793 --> 00:00:29,789
Just to demonstrate, let's see what
happens if we set our figcaption

7
00:00:29,789 --> 00:00:34,799
from our last exercise to fixed,
rather than absolute positioning.

8
00:00:37,665 --> 00:00:42,915
Now, the figcaption is 100%
of the width of the viewport,

9
00:00:42,915 --> 00:00:45,695
and is positioned at the bottom.

10
00:00:45,695 --> 00:00:50,281
The fact that the parent element
figure is set to a relative

11
00:00:50,281 --> 00:00:55,626
positioning doesn't have any impact
on a fixed position element.

12
00:00:55,626 --> 00:01:00,585
Also as we scroll up and down,
notice that the figcaption stays in

13
00:01:00,585 --> 00:01:04,914
a fixed place on the screen,
where content with absolute

14
00:01:04,914 --> 00:01:09,537
positioning scrolls with
the rest of the document content.

15
00:01:09,537 --> 00:01:12,305
This is where fixed
positioning gets its name.

16
00:01:14,409 --> 00:01:19,712
This is also a pretty good
illustration of CSS stacking,

17
00:01:19,712 --> 00:01:24,020
which uses a property
called z-index to allow

18
00:01:24,020 --> 00:01:28,891
developers to stack CSS
boxes on top of one another.

19
00:01:28,891 --> 00:01:35,802
When absolute or fixed positioning breaks
content from the normal document flow,

20
00:01:35,802 --> 00:01:42,034
it allows you to position that content
in front of or behind other content.

21
00:01:42,034 --> 00:01:49,624
Elements with a higher z-index are stacked
on top of elements with a lower z-index.

22
00:01:49,624 --> 00:01:56,777
For example, let's try setting
the z-index of our figcaption to -1.

23
00:02:00,079 --> 00:02:05,383
Now, our caption is behind
the rest of our document content,

24
00:02:05,383 --> 00:02:08,445
which has a default z-index of 0.

25
00:02:10,331 --> 00:02:14,948
The figcaption looked better before
these changes, so I'm going to undo them.

26
00:02:17,171 --> 00:02:21,795
And instead apply fixed positioning
to developer Diane's header.

27
00:02:26,460 --> 00:02:30,844
While positioning it so it touches
the top left corner of the viewport.

28
00:02:40,669 --> 00:02:45,377
That worked, but
there's a few issues relating to the fact

29
00:02:45,377 --> 00:02:49,630
that fixed content leaves
the normal document flow.

30
00:02:49,630 --> 00:02:55,871
One is that the width is no longer 100%,
but we can fix that easily enough.

31
00:03:03,936 --> 00:03:10,181
The adjustments we made earlier to
the margin are no longer necessary,

32
00:03:10,181 --> 00:03:16,645
since the header is no longer being
affected by the normal document flow.

33
00:03:16,645 --> 00:03:20,222
I'm also going to erase
the height declaration.

34
00:03:20,222 --> 00:03:26,079
It's awkward having a fixed element take
up 25% of the height of the viewport.

35
00:03:30,576 --> 00:03:34,241
That looks better, but
when our page loads,

36
00:03:34,241 --> 00:03:38,489
the start of Diane's Blog
post is still covered up.

37
00:03:38,489 --> 00:03:44,393
The fixed header has a higher z-index
than the rest of the document content.

38
00:03:44,393 --> 00:03:48,862
And with the header removed from
the normal document flow Diane's post

39
00:03:48,862 --> 00:03:51,033
starts at the top of the viewport.

40
00:03:53,639 --> 00:03:58,366
We can solve this by adding a bit
of extra space at the top of our

41
00:03:58,366 --> 00:04:01,633
article to account for the fixed header.

42
00:04:12,081 --> 00:04:14,952
So how about sticky positioning,

43
00:04:14,952 --> 00:04:20,998
that one's an interesting mixture
of relative and fixed positioning.

44
00:04:20,998 --> 00:04:25,933
To try it out, I'm going to create
a banner in between sections in

45
00:04:25,933 --> 00:04:30,351
Diane's article just to
capture some visual attention.

46
00:04:42,793 --> 00:04:48,159
And we'll add a bit of styling similar
to what we use to style our header.

47
00:05:21,716 --> 00:05:25,994
Hopefully, you'll recognize
many of these declarations.

48
00:05:25,994 --> 00:05:29,192
Since we are styling this
similar to our header,

49
00:05:29,192 --> 00:05:34,586
you might even think of ways to reduce the
amount of CSS using the DRY principle.

50
00:05:37,745 --> 00:05:42,502
Okay, so that is a fun looking
banner in the browser, but

51
00:05:42,502 --> 00:05:45,091
nothing too special just yet.

52
00:05:45,091 --> 00:05:48,902
Let's add two more lines to our CSS rule.

53
00:05:56,202 --> 00:06:02,473
When we first refresh the page, the banner
isn't at the top of the viewport, is it?

54
00:06:02,473 --> 00:06:07,999
The measurements you include in sticky
positioning represent a threshold.

55
00:06:07,999 --> 00:06:11,415
If the user scrolls past a certain point,

56
00:06:11,415 --> 00:06:15,524
then we'll give the element
fixed positioning.

57
00:06:15,524 --> 00:06:17,850
Let's see what happens when we scroll.

58
00:06:20,460 --> 00:06:25,135
And look at that,
once we scroll down far enough that

59
00:06:25,135 --> 00:06:30,025
the banner reaches the top of
the viewport it sticks and

60
00:06:30,025 --> 00:06:35,356
it remains there until the user
scrolls far back up enough.

61
00:06:35,356 --> 00:06:39,659
The banner we've created is
currently on top of our header.

62
00:06:39,659 --> 00:06:45,004
So of course, we could use z-index if we
would like to change their stacking order.