1
00:00:09,046 --> 00:00:10,630
Hi everybody, welcome back.

2
00:00:10,630 --> 00:00:15,130
Today, we're going to be talking about
positioning elements in your webpage.

3
00:00:15,130 --> 00:00:17,440
So trying to layout your page and

4
00:00:17,440 --> 00:00:22,170
your coding is probably going to be one of
the most time consuming and, potentially,

5
00:00:22,170 --> 00:00:25,820
frustrating things that you're
going to do in this entire course.

6
00:00:25,820 --> 00:00:28,750
And that's one one reason why I've
left almost this entire week for

7
00:00:28,750 --> 00:00:32,120
us to practice laying
things out on your page.

8
00:00:32,120 --> 00:00:35,380
The ideas themselves are very simple and
straightforward, but

9
00:00:35,380 --> 00:00:37,170
it's the putting them together,
as you add more and

10
00:00:37,170 --> 00:00:40,160
more to your page,
where things can get a little bit tricky.

11
00:00:40,160 --> 00:00:43,070
So let's begin talking about
the different positioning elements,

12
00:00:43,070 --> 00:00:47,520
or, the different positioning properties,
that you can use, okay?

13
00:00:47,520 --> 00:00:52,240
The four position properties are static,
relative, absolute, and

14
00:00:52,240 --> 00:00:55,600
fixed, and for
the most part they're very different.

15
00:00:55,600 --> 00:00:59,090
How they work together, or
how they work, is that each one of these

16
00:00:59,090 --> 00:01:04,220
can also be modified by properties
such as top, right, bottom, and left.

17
00:01:04,220 --> 00:01:07,270
So you say what kind of position
you want the element to be, and

18
00:01:07,270 --> 00:01:10,170
then you can say, but
I want it to be this far from the top or

19
00:01:10,170 --> 00:01:12,470
this high off the bottom, or
this far over from the left.

20
00:01:13,840 --> 00:01:17,110
So let's start with static, and the reason
we're going to start with static

21
00:01:17,110 --> 00:01:19,510
is because you've already
been using it all along.

22
00:01:19,510 --> 00:01:22,150
It's what we call the default value for
elements.

23
00:01:22,150 --> 00:01:25,180
If you don't say anything else,
it's going to be set to this.

24
00:01:25,180 --> 00:01:28,870
How it works is that the browser
is going to place each element

25
00:01:28,870 --> 00:01:31,540
in just the next available position.

26
00:01:31,540 --> 00:01:35,170
You can give it values such as top,
bottom, left, and right, but

27
00:01:35,170 --> 00:01:37,180
the browser's going to
completely ignore it.

28
00:01:37,180 --> 00:01:38,710
How it's going to work
is something like this.

29
00:01:38,710 --> 00:01:40,670
Let me see if I can draw this up here.

30
00:01:40,670 --> 00:01:41,630
Is you've got your screen.

31
00:01:43,500 --> 00:01:46,330
And then it's time to start adding things
to your page, and the browser goes, oh,

32
00:01:46,330 --> 00:01:48,380
well this is span so it fits right here.

33
00:01:48,380 --> 00:01:50,990
And the next one's span,
so it fits right here.

34
00:01:50,990 --> 00:01:55,050
Oh, she's got something that's block,
so I need to go down here.

35
00:01:55,050 --> 00:01:58,970
So as you add, it just starts at the top,
and works a ways across, and then down.

36
00:02:01,410 --> 00:02:02,960
But we can go beyond that.

37
00:02:02,960 --> 00:02:05,740
We can change how the browser
positions things, and

38
00:02:05,740 --> 00:02:09,030
one of the ways we can do that
is to use position relative.

39
00:02:09,030 --> 00:02:13,000
And when I say relative,
I mean relative to itself.

40
00:02:13,000 --> 00:02:13,750
Where would it go?

41
00:02:13,750 --> 00:02:15,890
All right,
let's scooch it over a little bit.

42
00:02:17,490 --> 00:02:20,250
It's, basically,
very similar to the static position, but

43
00:02:20,250 --> 00:02:22,660
now you get to add these offsets.

44
00:02:22,660 --> 00:02:25,480
The new positioning,
the new place that we put the element,

45
00:02:25,480 --> 00:02:28,030
it's not going to affect
any of its neighbors.

46
00:02:28,030 --> 00:02:30,780
Instead, what it may do is leave holes

47
00:02:30,780 --> 00:02:33,040
where the browser thought it
should've been in the first place.

48
00:02:34,510 --> 00:02:37,630
Usually, relatively positioned
elements are used as containers or

49
00:02:37,630 --> 00:02:39,240
blocks for other elements.

50
00:02:39,240 --> 00:02:41,630
So let me just show you
another quick example here.

51
00:02:41,630 --> 00:02:42,140
Turn this on.

52
00:02:44,260 --> 00:02:48,870
I've got my browser window, and let's say
I'm about to put in a span element, and

53
00:02:48,870 --> 00:02:51,020
it's gonna go right there.

54
00:02:51,020 --> 00:02:54,070
Well instead,
if you say that the position is relative,

55
00:02:54,070 --> 00:02:59,170
and you give it some sort of number like
top ten, instead of placing it right here,

56
00:02:59,170 --> 00:03:03,210
it's actually gonna go
underneath where it should be.

57
00:03:03,210 --> 00:03:07,250
So again, we're just adding little
numbers to move things from where they

58
00:03:07,250 --> 00:03:08,220
would normally go.

59
00:03:10,020 --> 00:03:12,550
The next position is
what we call absolute.

60
00:03:12,550 --> 00:03:15,940
And this one can really confuse
people when you first start it,

61
00:03:15,940 --> 00:03:20,060
because the browser, instead of putting
it in the next available position, it

62
00:03:20,060 --> 00:03:24,620
ignores all the elements, and really just
looks at the main container it was in.

63
00:03:24,620 --> 00:03:27,190
In this case, we're going to show
one example with the browser.

64
00:03:28,190 --> 00:03:32,050
The other elements on the page
behave as if it doesn't even exist.

65
00:03:32,050 --> 00:03:36,540
And what this can lead to, is that you can
end up with one element on top of another.

66
00:03:36,540 --> 00:03:37,820
So, let's try this.

67
00:03:37,820 --> 00:03:38,610
I've got my browser.

68
00:03:38,610 --> 00:03:40,450
Don't have a lot of room, here.

69
00:03:40,450 --> 00:03:42,780
So right here.
And let's say I've got a div,

70
00:03:42,780 --> 00:03:47,600
and I've decided that it's absolute, and
it should be a 100 down from the top, and

71
00:03:47,600 --> 00:03:49,030
maybe a 100 over.

72
00:03:49,030 --> 00:03:49,980
So it goes right here.

73
00:03:51,540 --> 00:03:53,910
All right, well,
if we were doing relative,

74
00:03:53,910 --> 00:03:56,970
the next element would go underneath it.

75
00:03:56,970 --> 00:04:01,500
But if we have two absolute values,
the next one that shows up is gonna go,

76
00:04:01,500 --> 00:04:03,300
again, right on top of it.

77
00:04:03,300 --> 00:04:08,120
All right, the final position that
I'm gonna talk about is called fixed.

78
00:04:08,120 --> 00:04:11,760
And the fixed position is
relative to the browser window.

79
00:04:11,760 --> 00:04:13,860
This is how they're able
to create these pages,

80
00:04:13,860 --> 00:04:16,910
where sometimes you get that pop up,
and you just can't get it to go away.

81
00:04:16,910 --> 00:04:20,070
You keep scrolling and scrolling,
and it's following you.

82
00:04:20,070 --> 00:04:22,820
Well, how they've done that is
they've used that fixed position.

83
00:04:24,050 --> 00:04:27,990
That element is not going to move
even if the window is scrolled.

84
00:04:27,990 --> 00:04:31,440
Just so you know if you're using some
older browser, or you're trying to design

85
00:04:31,440 --> 00:04:36,850
for Internet Explorer 7 or 8, this only
works if you're using an HTML5 DOCTYPE.

86
00:04:38,320 --> 00:04:42,400
So again when you think of the fixed
position think of pop up boxes

87
00:04:42,400 --> 00:04:43,900
that just won't go away.

88
00:04:45,450 --> 00:04:48,700
Or you might wanna also think of it as
something more useful which is when you're

89
00:04:48,700 --> 00:04:52,080
on a page, and you might have that
navigation bar that's on the top, and

90
00:04:52,080 --> 00:04:54,930
as you scroll through the page,
you don't have to scroll back up to

91
00:04:54,930 --> 00:04:57,140
see the navigation bar,
cuz it's always just there.

92
00:04:58,430 --> 00:05:01,550
So let's go ahead and
look at an example where I've got some

93
00:05:01,550 --> 00:05:04,029
different elements that use
the different position properties.

94
00:05:05,830 --> 00:05:08,600
Okay, I'm about to show you
a page where I've gone in, and

95
00:05:08,600 --> 00:05:10,050
I've put a couple elements.

96
00:05:10,050 --> 00:05:12,490
Just two divs, and a couple paragraphs.

97
00:05:12,490 --> 00:05:16,150
And just to start off,
I gave them some starter styling, just so

98
00:05:16,150 --> 00:05:17,990
we can distinguish between them.

99
00:05:17,990 --> 00:05:22,670
For our div, I position relative,
I gave it a height, a width, and a border.

100
00:05:22,670 --> 00:05:25,120
For the paragraphs,
I gave it a border of a different color,

101
00:05:25,120 --> 00:05:28,830
gave it a top and left, and
I left it as position static,

102
00:05:28,830 --> 00:05:31,430
because that's the default
position it would always be.

103
00:05:31,430 --> 00:05:34,120
So I wanna show you what that's
gonna look like over in the browser.

104
00:05:35,270 --> 00:05:40,034
So if you look, you can see I've got two
divs, one up here and down here, and

105
00:05:40,034 --> 00:05:41,840
I have my three paragraphs.

106
00:05:41,840 --> 00:05:43,671
One, whoops, sorry.

107
00:05:43,671 --> 00:05:46,171
One, two, three.

108
00:05:46,171 --> 00:05:50,661
The first thing I wanna point out is that
this doesn't look exactly the way some of

109
00:05:50,661 --> 00:05:55,018
you may expect it to look, or even exactly
the same way some of you might see it if

110
00:05:55,018 --> 00:05:57,185
you load it on your browser.

111
00:05:57,185 --> 00:05:59,575
Instead of putting this paragraph
all the way at the top,

112
00:05:59,575 --> 00:06:01,855
it's actually pushed down a little bit.

113
00:06:01,855 --> 00:06:04,175
Same for the B and the C.

114
00:06:04,175 --> 00:06:09,205
The reason that happens is because all the
browsers have different default values for

115
00:06:09,205 --> 00:06:11,165
where the paragraph should be positioned.

116
00:06:11,165 --> 00:06:12,355
So, let me scroll over here for a second.

117
00:06:12,355 --> 00:06:14,170
I'm gonna go down.

118
00:06:14,170 --> 00:06:16,796
And you can see that there's this
weird code right here that says,

119
00:06:16,796 --> 00:06:20,170
-webkit- margin-before and
-webkit-margin-after.

120
00:06:20,170 --> 00:06:22,720
This is an example of some
pseudo classes that they used.

121
00:06:22,720 --> 00:06:25,740
So I don't want these different
default things to be coming into play.

122
00:06:25,740 --> 00:06:27,962
So I'm gonna go ahead and get rid of them.

123
00:06:37,171 --> 00:06:41,035
After I comment those out and
comment that back in, I refresh, and

124
00:06:41,035 --> 00:06:43,530
now we've got our A, B and C.

125
00:06:43,530 --> 00:06:45,930
So again, A, B, and C, are all relative.

126
00:06:45,930 --> 00:06:49,670
You're telling the browser,
just put it in the next available space.

127
00:06:49,670 --> 00:06:53,410
So let's see what's going to
happen now if I change my element

128
00:06:53,410 --> 00:06:56,770
from relative to static, or
sorry, from static to relative.

129
00:07:00,140 --> 00:07:03,070
And you can see that they've moved over,
and

130
00:07:03,070 --> 00:07:07,600
the reason they moved over is that I gave
it the values of top 100 and left 100.

131
00:07:07,600 --> 00:07:09,320
Go down, push on over.

132
00:07:09,320 --> 00:07:12,250
If I change this to 50.

133
00:07:12,250 --> 00:07:16,010
Oops, 59, that'll work.

134
00:07:18,120 --> 00:07:20,070
You can see doesn't move
over quite as much.

135
00:07:20,070 --> 00:07:23,500
So, static just go in
the first place you can.

136
00:07:23,500 --> 00:07:26,160
Relative, go in the first place you can,
but go ahead,

137
00:07:26,160 --> 00:07:29,670
you can tell it if you want it to move
over a little bit in either direction.

138
00:07:29,670 --> 00:07:33,754
The next one that we're
going to do is absolute.

139
00:07:38,004 --> 00:07:38,754
Maybe.

140
00:07:42,254 --> 00:07:45,750
There we go, so
now I want you to notice something.

141
00:07:45,750 --> 00:07:49,010
That A and that B,
they're on top of each other.

142
00:07:49,010 --> 00:07:53,520
Because you said,
I want you to be 100 pixels down and

143
00:07:53,520 --> 00:07:56,380
59 pixels off from the side
of the container element.

144
00:07:56,380 --> 00:07:58,010
In this case, it's that div.

145
00:07:58,010 --> 00:08:02,770
So this is odd cuz they're right on top of
each other, and it's all mixed together.

146
00:08:02,770 --> 00:08:06,710
There are circumstances where you will
want things to be on top of each other.

147
00:08:06,710 --> 00:08:08,110
Maybe one of them will be visible, and

148
00:08:08,110 --> 00:08:10,890
one of them will be hidden, and
they're gonna change dynamically.

149
00:08:10,890 --> 00:08:13,440
But this is what happens with absolute.

150
00:08:13,440 --> 00:08:18,350
Now, if I scroll, I'm gonna make this
screen a little bit smaller, and I scroll,

151
00:08:18,350 --> 00:08:21,580
you can see that the A and
the B, they do scroll away.

152
00:08:21,580 --> 00:08:25,590
And, of course, I did this example because
I wanted to show you that if I switched

153
00:08:25,590 --> 00:08:31,060
this to fixed now, instead of saying
position the element relative

154
00:08:31,060 --> 00:08:35,710
to its parent, saying position this
element relative to the entire browser.

155
00:08:35,710 --> 00:08:39,296
So now everything's on top of each other,
and if I try to scroll away.

156
00:08:41,421 --> 00:08:42,580
It doesn't work.

157
00:08:42,580 --> 00:08:44,860
It stays right there, okay?

158
00:08:44,860 --> 00:08:48,754
So again, it's static,
relative, absolute, and fixed.

159
00:08:48,754 --> 00:08:52,676
And I want you to play with these,
and know your options,

160
00:08:52,676 --> 00:08:55,880
before you start laying
out your code by hand.

161
00:08:55,880 --> 00:08:58,722
Now, one of the things I showed
you is that it's possible for

162
00:08:58,722 --> 00:09:02,258
multiple elements to be placed in the same
position or on top of each other.

163
00:09:02,258 --> 00:09:05,612
And there's a way to deal with that if
you don't like the ordering that they're

164
00:09:05,612 --> 00:09:06,171
showing up.

165
00:09:06,171 --> 00:09:07,954
And that's called the Z-index.

166
00:09:07,954 --> 00:09:11,940
The Z-index is just, basically, just
a number value, it's either positive or

167
00:09:11,940 --> 00:09:15,450
negative, that tells the browser
your stacking order.

168
00:09:15,450 --> 00:09:18,280
So if you have something and you're really
sure you wanna make sure it's always on

169
00:09:18,280 --> 00:09:21,150
top, you'd go ahead and
put something like 100 on it.

170
00:09:21,150 --> 00:09:24,500
If you didn't really care,
you'd could give it a negative 100.

171
00:09:24,500 --> 00:09:27,000
And this is the way that
people can go ahead, and

172
00:09:27,000 --> 00:09:30,010
position the elements to be
a little bit more dynamic later on,

173
00:09:30,010 --> 00:09:32,438
when we add some JavaScript or
different things like that.

174
00:09:32,438 --> 00:09:36,000
So the Z-index is something that
not a lot of people code with, but

175
00:09:36,000 --> 00:09:38,380
it's really helpful when
you're using inspect element,

176
00:09:38,380 --> 00:09:41,860
if there's something below, and
you wanna see what it looks like on top.

177
00:09:41,860 --> 00:09:43,630
So let's go ahead and review.

178
00:09:43,630 --> 00:09:47,080
Positioning your element is the key
to creating the layouts that you

179
00:09:47,080 --> 00:09:47,640
want to have.

180
00:09:47,640 --> 00:09:51,880
And this is especially important if you're
worried about your site looking good on

181
00:09:51,880 --> 00:09:54,280
a small screen, a big screen, etc.

182
00:09:54,280 --> 00:09:56,960
So proper planning is going
to make this much easier for

183
00:09:56,960 --> 00:09:59,440
you when it comes time
to code up your page.

184
00:09:59,440 --> 00:10:03,900
But really, the most important thing you
can do right now is go online, find those

185
00:10:03,900 --> 00:10:07,640
tutorials or different references where
they talk about positioning, and play with

186
00:10:07,640 --> 00:10:11,430
it until you're feeling a little bit more
comfortable with how each of these work.

187
00:10:11,430 --> 00:10:11,930
Good luck.