1
00:00:00,000 --> 00:00:02,233
Now we'll learn how to use CSS

2
00:00:02,233 --> 00:00:04,233
To really move things around.

3
00:00:04,233 --> 00:00:06,004
Not just put them next to each other.

4
00:00:06,004 --> 00:00:07,637
But to actually put things

5
00:00:07,637 --> 00:00:09,029
On top of each other.

6
00:00:09,029 --> 00:00:11,611
Here, we have a webpage

7
00:00:11,611 --> 00:00:16,041
With a few headers, and images, and some

8
00:00:16,041 --> 00:00:18,069
Paragraphs down here

9
00:00:18,069 --> 00:00:20,155
And its currently all laid out with

10
00:00:20,155 --> 00:00:22,177
The default positioning strategy

11
00:00:22,177 --> 00:00:24,212
Which the browser uses

12
00:00:24,212 --> 00:00:26,959
Which we call static or normal positioning

13
00:00:26,959 --> 00:00:29,388
It just means that in line elements

14
00:00:29,388 --> 00:00:30,699
Like images

15
00:00:30,699 --> 00:00:32,297
Are laid from left to right

16
00:00:32,297 --> 00:00:33,800
And block elements

17
00:00:33,800 --> 00:00:35,490
Like headers and paragraphs

18
00:00:35,490 --> 00:00:37,565
Are laid out from top to bottom

19
00:00:37,565 --> 00:00:39,915
We can change that positioning strategy

20
00:00:39,915 --> 00:00:42,670
Using the CSS position property

21
00:00:42,670 --> 00:00:45,621
Let's try it on the landscape image

22
00:00:45,621 --> 00:00:49,657
We'll type position, colon, and then

23
00:00:49,657 --> 00:00:51,446
Relative for the value

24
00:00:51,446 --> 00:00:53,406
The relative position strategy

25
00:00:53,406 --> 00:00:55,407
Means position it how you normally would

26
00:00:55,407 --> 00:00:57,791
But then offset it by some amount

27
00:00:57,791 --> 00:01:00,156
Now, to tell the browser what amount

28
00:01:00,156 --> 00:01:01,501
We want to offset by

29
00:01:01,501 --> 00:01:03,140
We need to use some combination

30
00:01:03,140 --> 00:01:05,179
Of four new CSS properties

31
00:01:05,179 --> 00:01:07,425
Top, bottom, and left, and right

32
00:01:07,425 --> 00:01:09,441
Like let's say we wanna have it be

33
00:01:09,441 --> 00:01:11,875
Twenty pixels down

34
00:01:11,875 --> 00:01:13,626
Say top twenty pixs

35
00:01:13,626 --> 00:01:15,222
And ten pixels over

36
00:01:15,222 --> 00:01:16,675
We'll say left ten pixs

37
00:01:16,675 --> 00:01:18,668
So that's kind of neat,

38
00:01:18,668 --> 00:01:20,893
But not really that neat

39
00:01:20,893 --> 00:01:23,472
I wanna show you something waaay cooler

40
00:01:23,472 --> 00:01:25,077
Absolute positioning

41
00:01:25,077 --> 00:01:26,583
We can use it to take an element

42
00:01:26,583 --> 00:01:28,525
Completely out of the normal flow

43
00:01:28,525 --> 00:01:30,613
And put it anywhere on the screen

44
00:01:30,613 --> 00:01:31,664
To do that

45
00:01:31,664 --> 00:01:32,945
I will change relative

46
00:01:32,945 --> 00:01:34,042
To absolute

47
00:01:34,042 --> 00:01:35,199
On the landscape

48
00:01:35,199 --> 00:01:36,575
And keep the top left

49
00:01:36,575 --> 00:01:37,778
And you can see

50
00:01:37,778 --> 00:01:39,213
That landscape is now

51
00:01:39,213 --> 00:01:41,705
Hiding our images and dance party heading

52
00:01:41,705 --> 00:01:42,772
And now we're going to fix that

53
00:01:42,772 --> 00:01:44,791
Let's start with Winston

54
00:01:44,791 --> 00:01:48,456
So we'll add a rule for Winston

55
00:01:48,456 --> 00:01:52,096
And give Winston a position absolute

56
00:01:52,096 --> 00:01:54,302
And then let me say

57
00:01:54,302 --> 00:01:56,110
Top forty pixs

58
00:01:56,110 --> 00:01:58,394
Oh, let's say top fifty pixs

59
00:01:58,394 --> 00:02:00,055
And then left fifty pixs

60
00:02:00,055 --> 00:02:02,204
Ok, that looks good

61
00:02:02,204 --> 00:02:04,302
And hopper is really eager to get on top

62
00:02:04,302 --> 00:02:05,617
As well

63
00:02:05,617 --> 00:02:07,295
So let's say Hopper also needs

64
00:02:07,295 --> 00:02:11,661
A position absolute

65
00:02:11,661 --> 00:02:15,218
And let's say top thirty pixs

66
00:02:15,218 --> 00:02:17,814
And left sixty pixs

67
00:02:17,814 --> 00:02:19,613
Ok, so my goal is

68
00:02:19,613 --> 00:02:21,216
To make it look like Hopper

69
00:02:21,216 --> 00:02:23,743
Is kind of dancing in front of Winston

70
00:02:23,743 --> 00:02:26,640
But right now it doesn't look that way

71
00:02:26,640 --> 00:02:28,244
Because Winston is being drawn

72
00:02:28,244 --> 00:02:30,358
On top of Hopper

73
00:02:30,358 --> 00:02:31,948
To fix this,

74
00:02:31,948 --> 00:02:33,619
I could either change the order of

75
00:02:33,619 --> 00:02:35,136
The actual image tags

76
00:02:35,136 --> 00:02:36,684
In the html

77
00:02:36,684 --> 00:02:38,699
But a kind of better way is

78
00:02:38,699 --> 00:02:42,257
To use the CSS z index property

79
00:02:42,257 --> 00:02:43,939
We can use that to tell the browser

80
00:02:43,939 --> 00:02:45,236
Exactly what order to draw

81
00:02:45,236 --> 00:02:46,035
Elements in

82
00:02:46,035 --> 00:02:47,384
By giving them differency

83
00:02:47,384 --> 00:02:48,247
Indexes

84
00:02:48,247 --> 00:02:50,691
So I'll start with a landscape

85
00:02:50,691 --> 00:02:53,268
And give it a z index of one

86
00:02:53,268 --> 00:02:56,345
And Winston goes on top with two

87
00:02:56,345 --> 00:02:59,054
Hopper goes on top with three

88
00:02:59,054 --> 00:03:00,081
Alright!

89
00:03:00,081 --> 00:03:02,641
Now Hopper is dancing in front of Winston

90
00:03:02,641 --> 00:03:04,178
Even if he doesn't like that

91
00:03:04,178 --> 00:03:05,239
But he'll have to deal

92
00:03:05,239 --> 00:03:07,801
But now we still have headings

93
00:03:07,801 --> 00:03:09,991
And columns that are hidden

94
00:03:09,991 --> 00:03:12,450
So let's see, let's try

95
00:03:12,450 --> 00:03:13,942
And get the, maybe I want the

96
00:03:13,942 --> 00:03:16,886
Dance party to be on top of everything

97
00:03:16,886 --> 00:03:19,081
So I'm also gonna give that

98
00:03:19,081 --> 00:03:20,698
Position absolute

99
00:03:20,698 --> 00:03:21,757
And z index four

100
00:03:21,757 --> 00:03:22,997
Ok, looks good

101
00:03:22,997 --> 00:03:24,421
Maybe left ten pixs

102
00:03:24,421 --> 00:03:25,252
Just move it over

103
00:03:25,252 --> 00:03:26,912
Maybe, maybe a bit more

104
00:03:26,912 --> 00:03:28,518
Alright, that looks good

105
00:03:28,518 --> 00:03:29,688
Now, for the song lyrics

106
00:03:29,688 --> 00:03:31,113
I actually just want them to

107
00:03:31,113 --> 00:03:32,816
display underneath everything

108
00:03:32,816 --> 00:03:35,525
So for those I'm thinking

109
00:03:35,525 --> 00:03:38,219
Position relative and then

110
00:03:38,219 --> 00:03:39,468
We could just do a top

111
00:03:39,468 --> 00:03:40,679
Which is you know,

112
00:03:40,679 --> 00:03:42,574
Would equal the height of the image

113
00:03:42,574 --> 00:03:45,119
It would be two hundred twenty pixels

114
00:03:45,119 --> 00:03:48,425
Alright, so that is looking really good

115
00:03:48,425 --> 00:03:50,129
We've got a crazy dance party

116
00:03:50,129 --> 00:03:52,179
Going on now

117
00:03:52,179 --> 00:03:53,822
Now, if you pause a talkthrough

118
00:03:53,822 --> 00:03:55,770
And try scrolling the page

119
00:03:55,770 --> 00:03:58,051
You'll see that everything

120
00:03:58,051 --> 00:03:59,209
Scrolls together

121
00:03:59,209 --> 00:04:00,989
And the important thing is

122
00:04:00,989 --> 00:04:02,616
That absolute positioning is relative

123
00:04:02,616 --> 00:04:04,053
To the top of the webpage

124
00:04:04,053 --> 00:04:06,017
So, as you scroll down the webpage

125
00:04:06,040 --> 00:04:07,733
Things that were ten pixels

126
00:04:07,733 --> 00:04:10,550
Top, are going to be moving off screen

127
00:04:10,550 --> 00:04:11,919
Because you are going farther away from

128
00:04:11,919 --> 00:04:14,640
The top of the webpage

129
00:04:14,640 --> 00:04:15,807
Another option is

130
00:04:15,807 --> 00:04:17,109
Fixed positioning

131
00:04:17,109 --> 00:04:18,765
Which will actually make it seem like

132
00:04:18,765 --> 00:04:20,354
Things don't move at all

133
00:04:20,354 --> 00:04:22,097
And, if you want to try that out

134
00:04:22,097 --> 00:04:23,051
We can just change

135
00:04:23,051 --> 00:04:25,693
h1 from absolute to fixed

136
00:04:25,693 --> 00:04:29,073
And now, pause and try scrolling

137
00:04:29,073 --> 00:04:31,085
And you will see that

138
00:04:31,085 --> 00:04:33,678
Dance party just stays in the same place

139
00:04:33,678 --> 00:04:35,667
Because now, it is actaully

140
00:04:35,667 --> 00:04:39,216
Relative to the top of the screen

141
00:04:39,216 --> 00:04:40,852
The window

142
00:04:40,852 --> 00:04:43,917
Ok, so we've managed to use

143
00:04:43,917 --> 00:04:45,941
Three different position properties

144
00:04:45,941 --> 00:04:47,697
To do some pretty cool stuff

145
00:04:47,697 --> 00:04:48,519
When would we

146
00:04:48,519 --> 00:04:51,071
Actually use absolute or fixed positioning

147
00:04:51,071 --> 00:04:53,109
Well, you could use them

148
00:04:53,109 --> 00:04:54,183
To make a game,

149
00:04:54,183 --> 00:04:55,693
Like I did here

150
00:04:55,693 --> 00:04:57,219
Because you'll want to layout all

151
00:04:57,219 --> 00:04:58,864
The parts of the scene in the browser

152
00:04:58,864 --> 00:05:00,229
But you can also use them

153
00:05:00,229 --> 00:05:01,634
For normal webpages

154
00:05:01,634 --> 00:05:03,026
Like on Khan Academy

155
00:05:03,026 --> 00:05:04,383
We use absolute positioning for the models

156
00:05:04,383 --> 00:05:06,279
That pop up in the middle of the page

157
00:05:06,279 --> 00:05:07,650
And use fixed positioning

158
00:05:07,650 --> 00:05:08,751
For the search box on out team page

159
00:05:08,751 --> 00:05:11,813
So that it is always visible as you scroll

160
00:05:11,813 --> 00:05:14,232
You probably won't use positioning

161
00:05:14,232 --> 00:05:15,431
In every webpage

162
00:05:15,431 --> 00:05:16,704
But when you do use it

163
00:05:16,704 --> 00:05:18,967
You'll be really happy that it exists