1
00:00:00,723 --> 00:00:05,540
By default, the position of elements
on the page is determined by

2
00:00:05,540 --> 00:00:10,050
the normal flow of content
in the HTML document.

3
00:00:10,050 --> 00:00:14,250
In other words, if you have a heading
with a paragraph beneath it,

4
00:00:14,250 --> 00:00:16,950
and a bulleted list below that paragraph,

5
00:00:16,950 --> 00:00:21,240
that's exactly the order that
content will appear in the browser.

6
00:00:22,640 --> 00:00:26,743
CSS provides various options for
positioning content.

7
00:00:26,743 --> 00:00:31,180
In this video,
I'll teach you how to position elements in

8
00:00:31,180 --> 00:00:34,539
the document using the position property.

9
00:00:35,745 --> 00:00:41,639
I'm looking at the MDN
documentation on CSS positioning.

10
00:00:41,639 --> 00:00:46,331
The default value is static, which means
the element is positioned according to

11
00:00:46,331 --> 00:00:48,270
the normal flow of the document.

12
00:00:49,540 --> 00:00:55,331
In addition, we're able to work
with values called relative,

13
00:00:55,331 --> 00:00:58,342
absolute, fixed, and sticky.

14
00:01:00,770 --> 00:01:05,510
Relative positioning is pretty
similar to static positioning.

15
00:01:05,510 --> 00:01:10,131
As an element set to relative positioning
will still be positioned according

16
00:01:10,131 --> 00:01:11,490
to the document flow.

17
00:01:12,540 --> 00:01:17,978
If we set our h1 element
to position: relative,

18
00:01:29,724 --> 00:01:32,750
We don't see any changes
in our browser preview.

19
00:01:33,760 --> 00:01:38,301
However, relative positioning
also allows us to offset

20
00:01:38,301 --> 00:01:42,092
the position of an element
relative to itself.

21
00:01:42,092 --> 00:01:47,284
We can use properties called top,
right, bottom,

22
00:01:47,284 --> 00:01:54,490
and left to adjust the positioning
of a relatively positioned element.

23
00:01:56,361 --> 00:02:04,655
Here, we've moved our h1 element 60
pixels over from the normal left edge.

24
00:02:04,655 --> 00:02:09,645
Notice that unless we make some sort of
adjustment to the width of this element,

25
00:02:09,645 --> 00:02:12,118
it's causing horizontal scrolling.

26
00:02:12,118 --> 00:02:19,292
It's still 100% of the width of
the parent, but moved over 60 pixels.

27
00:02:22,171 --> 00:02:23,726
You might be thinking,

28
00:02:23,726 --> 00:02:27,782
"Hmmm. I don't know how often
I'd use positioning to do that.

29
00:02:27,782 --> 00:02:31,830
It seems better to work with margin and
padding, right?"

30
00:02:31,830 --> 00:02:36,554
And I agree, so let's see if we can't come
up with a more useful demonstration of

31
00:02:36,554 --> 00:02:38,860
relative positioning.

32
00:02:38,860 --> 00:02:42,920
But to do that, let's first take
a look at absolute positioning.

33
00:02:44,250 --> 00:02:49,266
Absolute positioning removes an element
from the normal document flow.

34
00:02:49,266 --> 00:02:50,386
And by default,

35
00:02:50,386 --> 00:02:55,106
allows you to position the element
based on the edges of the viewport.

36
00:03:07,285 --> 00:03:09,332
Previewing this in the browser,

37
00:03:09,332 --> 00:03:15,040
we can see that the h1 element has indeed
been removed from the document flow.

38
00:03:15,040 --> 00:03:20,813
The area above Diane's introductory
paragraph no longer has a heading,

39
00:03:20,813 --> 00:03:21,565
does it?

40
00:03:21,565 --> 00:03:26,552
Instead, the heading is now 20 pixels
from the top of the viewport, and

41
00:03:26,552 --> 00:03:29,860
10 pixels from the right
edge of the viewport.

42
00:03:30,870 --> 00:03:36,142
The element no longer defaults to
being as wide as the rest of our HTML

43
00:03:36,142 --> 00:03:41,149
content because it's no longer
part of the same document flow.

44
00:03:41,149 --> 00:03:45,834
If we add width: 100% to our CSS rule,

45
00:03:49,519 --> 00:03:53,732
The h1 is now the same
width as the viewport.

46
00:03:54,983 --> 00:03:59,909
Okay, so that by itself might
not be super useful either.

47
00:03:59,909 --> 00:04:03,880
And I'm going to delete the rule
I've created for the h1 element.

48
00:04:05,180 --> 00:04:09,824
But now that we've covered both
relative and absolute positioning,

49
00:04:09,824 --> 00:04:13,453
we can combine them to create
something interesting.

50
00:04:13,453 --> 00:04:18,278
When I introduced absolute positioning,
I mentioned that by default,

51
00:04:18,278 --> 00:04:22,560
elements will be positioned based
on the edges of the viewport.

52
00:04:23,620 --> 00:04:28,663
However, looking back at the MDN docs,
absolute positioning is

53
00:04:28,663 --> 00:04:35,670
actually defined as positioned relative
to the closest positioned ancestor.

54
00:04:35,670 --> 00:04:41,035
In other words, if a parent element
uses relative positioning, we

55
00:04:41,035 --> 00:04:47,542
can use absolute positioning to position
a child element relative to the parent.

56
00:04:49,773 --> 00:04:55,073
For example, let's create a caption for
Diane's bio image.

57
00:04:55,073 --> 00:05:00,643
We'll use the figure and
figcaption elements in our HTML to do so.

58
00:05:11,257 --> 00:05:16,704
And I'll just reuse my alt
description to create the figcaption.

59
00:05:27,045 --> 00:05:33,467
By default, the figure element has 40
pixels of margin on the left and right.

60
00:05:33,467 --> 00:05:38,500
We can eliminate that, but what I'm really

61
00:05:38,500 --> 00:05:43,262
interested in doing is using relative and

62
00:05:43,262 --> 00:05:48,160
absolute positioning to place the caption

63
00:05:48,160 --> 00:05:52,390
on top of developer Diane's image.

64
00:05:57,415 --> 00:06:04,985
When we set the figure's
position property to relative,

65
00:06:04,985 --> 00:06:09,164
nothing happens immediately.

66
00:06:09,164 --> 00:06:13,786
But since figure is the parent
of the figcaption element,

67
00:06:13,786 --> 00:06:19,553
we can now use absolute positioning
to place the caption over the image.

68
00:06:41,463 --> 00:06:42,808
Pretty cool, right?

69
00:06:42,808 --> 00:06:46,917
The caption is 20 pixels from
the bottom edge of the image.

70
00:06:46,917 --> 00:06:52,238
The only issue is that the caption
is wider than the image.

71
00:06:52,238 --> 00:06:55,932
I'll give you a moment to see
if you can use your element

72
00:06:55,932 --> 00:06:57,951
inspector to figure out why.

73
00:07:01,799 --> 00:07:03,261
Did you get it?

74
00:07:03,261 --> 00:07:05,346
That was a tough question.

75
00:07:05,346 --> 00:07:13,264
The issue is, the image element
has a max width of 480 pixels.

76
00:07:13,264 --> 00:07:19,383
But the figure element is allowed to
extend all the way across the viewport.

77
00:07:19,383 --> 00:07:24,481
The figcaption element is
the same width as its parent,

78
00:07:24,481 --> 00:07:27,202
which is the figure element.

79
00:07:27,202 --> 00:07:30,711
There are a variety of
ways we could fix this.

80
00:07:30,711 --> 00:07:38,561
One way would be to add figure to the CSS
rule containing the max-width declaration.

81
00:07:38,561 --> 00:07:42,851
Which would prevent both the figure and

82
00:07:42,851 --> 00:07:48,058
the image from going
wider than 480 pixels.

83
00:07:49,202 --> 00:07:53,804
But if you found another solution,
that's great.

84
00:07:53,804 --> 00:07:59,087
CSS layout challenges rarely
offer only one solution.

85
00:07:59,087 --> 00:08:03,036
So far, in addition to
the default static positioning,

86
00:08:03,036 --> 00:08:07,420
we've covered absolute and
relative positioning.

87
00:08:07,420 --> 00:08:12,140
We'll take a look at our remaining
positioning values, fixed and sticky,

88
00:08:12,140 --> 00:08:13,330
in our next video.