1
00:00:01.06 --> 00:00:03.08
- [Chris] Hi, this is Chris
Convers, and in this episode,

2
00:00:03.08 --> 00:00:06.00
we'll be taking a look
at the position property

3
00:00:06.00 --> 00:00:08.01
and how this allows us to
change the relationship

4
00:00:08.01 --> 00:00:11.00
between HTML elements on our page.

5
00:00:11.00 --> 00:00:13.06
Now by default, HTML
elements flow in the browser

6
00:00:13.06 --> 00:00:16.06
in the same order they
appear in the HTML file,

7
00:00:16.06 --> 00:00:18.08
and elements flow after
and around each other

8
00:00:18.08 --> 00:00:20.01
throughout the document.

9
00:00:20.01 --> 00:00:22.07
The position property
allows us to place elements

10
00:00:22.07 --> 00:00:25.01
with pixel-level precision anywhere

11
00:00:25.01 --> 00:00:26.09
within the HTML document.

12
00:00:26.09 --> 00:00:29.06
Now you can take control
over which HTML elements

13
00:00:29.06 --> 00:00:32.00
control our positioned
elements by assigning

14
00:00:32.00 --> 00:00:35.00
positioning properties
to that element's parent.

15
00:00:35.00 --> 00:00:36.06
So if you'd like to follow along with me,

16
00:00:36.06 --> 00:00:39.01
download the exercise files
and let's start by opening

17
00:00:39.01 --> 00:00:46.02
the index.html file in the text editor.

18
00:00:46.02 --> 00:00:48.05
So here in the HTML file,
you'll see that we have

19
00:00:48.05 --> 00:00:50.06
a partial layout set up.

20
00:00:50.06 --> 00:00:52.04
In addition to opening
this in the text editor,

21
00:00:52.04 --> 00:00:55.03
you can also open
index.html up in a browser.

22
00:00:55.03 --> 00:00:57.09
My text editor has a built-in preview

23
00:00:57.09 --> 00:01:00.07
so I'll use that.

24
00:01:00.07 --> 00:01:02.03
And in the browser you'll
see we have a little bit

25
00:01:02.03 --> 00:01:04.05
of content, a few headings,
and a promotional area

26
00:01:04.05 --> 00:01:06.00
down here.

27
00:01:06.00 --> 00:01:07.07
Now the main elements
we'll be concerned with

28
00:01:07.07 --> 00:01:09.08
will be the article
element, the aside element

29
00:01:09.08 --> 00:01:12.06
that's inside of the article element,

30
00:01:12.06 --> 00:01:15.04
and an image element which is
inside of the aside element,

31
00:01:15.04 --> 00:01:18.05
which is also inside
of the article element.

32
00:01:18.05 --> 00:01:20.06
So in our HTML file, if we scroll down,

33
00:01:20.06 --> 00:01:24.01
we can see the article element here.

34
00:01:24.01 --> 00:01:26.04
Here's our aside, and inside of the aside

35
00:01:26.04 --> 00:01:29.06
which is this blue container
here, we have an image

36
00:01:29.06 --> 00:01:33.06
pointing to a file called
plane.svg, which is this

37
00:01:33.06 --> 00:01:36.08
little airplane symbol here
with this little swish.

38
00:01:36.08 --> 00:01:39.03
We have our H3 and a paragraph element,

39
00:01:39.03 --> 00:01:41.08
and then down here is an anchor tag.

40
00:01:41.08 --> 00:01:44.05
So what we're going to do
now is open up the CSS file

41
00:01:44.05 --> 00:01:49.06
and we're going to begin to
position this airplane graphic.

42
00:01:49.06 --> 00:01:51.05
So let's go back to the exercise files,

43
00:01:51.05 --> 00:01:54.07
let's find styles.css
inside of the assets folder,

44
00:01:54.07 --> 00:01:56.07
let's open this in our text editor,

45
00:01:56.07 --> 00:02:01.01
let's scroll down and let's
find the rule that I've placed

46
00:02:01.01 --> 00:02:04.07
in here called aside space img.

47
00:02:04.07 --> 00:02:06.04
So we're going to target
that image element

48
00:02:06.04 --> 00:02:09.03
that's inside of the aside element.

49
00:02:09.03 --> 00:02:12.05
So inside here let's
add a position property.

50
00:02:12.05 --> 00:02:14.07
So I'll add a position and
then we'll set the value

51
00:02:14.07 --> 00:02:17.03
to absolute.

52
00:02:17.03 --> 00:02:19.02
Now once we do that, you'll
see that the airplane

53
00:02:19.02 --> 00:02:22.07
stays in exactly the same
position, however the contents

54
00:02:22.07 --> 00:02:26.04
are now flowing up underneath
of that airplane graphic.

55
00:02:26.04 --> 00:02:28.07
So what's happening here is
we have absolute position

56
00:02:28.07 --> 00:02:32.04
properties which removes the
natural flow of this element

57
00:02:32.04 --> 00:02:35.04
inside of the aside
element, so now by default,

58
00:02:35.04 --> 00:02:38.03
the positioning properties,
the values of where

59
00:02:38.03 --> 00:02:41.02
this is being placed, is
being picked up from where

60
00:02:41.02 --> 00:02:44.01
that content shows up in line, which means

61
00:02:44.01 --> 00:02:46.06
the left-hand property
and the top property

62
00:02:46.06 --> 00:02:48.09
are exactly where they were before.

63
00:02:48.09 --> 00:02:51.07
So now we're going to add
a top and left property

64
00:02:51.07 --> 00:02:54.09
to give this absolute position values.

65
00:02:54.09 --> 00:02:59.00
So let's add a space, let's
type in top colon space,

66
00:02:59.00 --> 00:03:02.04
we'll set zero pixels and hit a semicolon.

67
00:03:02.04 --> 00:03:04.05
Now as soon as we do that,
you'll see that the airplane

68
00:03:04.05 --> 00:03:08.01
graphic now will position
based on the main body element.

69
00:03:08.01 --> 00:03:09.07
What's happening here is each element

70
00:03:09.07 --> 00:03:13.00
with absolute positioning will
look to its immediate parent

71
00:03:13.00 --> 00:03:16.05
to see if its parent element
has any positioning properties.

72
00:03:16.05 --> 00:03:19.03
If it doesn't, it will then
look to that element's parent

73
00:03:19.03 --> 00:03:21.06
and it will follow that
pattern all the way through

74
00:03:21.06 --> 00:03:23.05
the HTML document until it finds an item

75
00:03:23.05 --> 00:03:25.09
with position properties,
and if none of our elements

76
00:03:25.09 --> 00:03:28.01
have position properties,
it'll go all the way up

77
00:03:28.01 --> 00:03:29.08
to the body element,
which is why we're seeing

78
00:03:29.08 --> 00:03:31.03
this at the top.

79
00:03:31.03 --> 00:03:33.02
And so before we fix that
problem, let's come in here

80
00:03:33.02 --> 00:03:35.00
and set our left property as well.

81
00:03:35.00 --> 00:03:37.08
So we'll set left to zero
pixels, and now you'll see

82
00:03:37.08 --> 00:03:40.05
that the airplane is positioning
to the zero zero point

83
00:03:40.05 --> 00:03:42.07
of the body element.

84
00:03:42.07 --> 00:03:44.08
So now what we're going
to do is let's scroll up

85
00:03:44.08 --> 00:03:47.07
in the CSS, let's find
our article element,

86
00:03:47.07 --> 00:03:52.00
let's come in here and add a
position property of relative.

87
00:03:52.00 --> 00:03:56.07
So we'll add a position, add
relative, then a semicolon.

88
00:03:56.07 --> 00:03:58.09
And now we'll see that that
airplane graphic is now

89
00:03:58.09 --> 00:04:01.07
positioning in relation
to the article element.

90
00:04:01.07 --> 00:04:04.05
So position and relative
tells the browser that

91
00:04:04.05 --> 00:04:07.07
that particular object,
this article element,

92
00:04:07.07 --> 00:04:10.01
does not have any absolute
positioning properties,

93
00:04:10.01 --> 00:04:13.05
so it should still fall in
the regular flow of the HTML,

94
00:04:13.05 --> 00:04:16.00
however any elements
inside the article element,

95
00:04:16.00 --> 00:04:18.03
which include this image,
should be positioned

96
00:04:18.03 --> 00:04:21.01
in relation to this item.

97
00:04:21.01 --> 00:04:24.03
So inside the article
element, let's come in here,

98
00:04:24.03 --> 00:04:27.09
let's copy position
relative, let's scroll down

99
00:04:27.09 --> 00:04:32.08
and find the aside,
let's paste that property

100
00:04:32.08 --> 00:04:35.08
into the aside as well, and
now we'll see that the image

101
00:04:35.08 --> 00:04:38.06
element is now positioning
inside of the aside,

102
00:04:38.06 --> 00:04:39.08
which is what I want.

103
00:04:39.08 --> 00:04:42.03
I want to position the
airplane and the link

104
00:04:42.03 --> 00:04:45.05
in the lower right in
relation to the aside element

105
00:04:45.05 --> 00:04:47.06
to sort of create our promo area.

106
00:04:47.06 --> 00:04:49.06
So now that this is positioned properly,

107
00:04:49.06 --> 00:04:51.09
let's scroll back down,
let's go back into the aside

108
00:04:51.09 --> 00:04:55.05
space image, and let's
change our properties.

109
00:04:55.05 --> 00:04:58.00
So I mentioned we have
pixel-level control.

110
00:04:58.00 --> 00:04:59.09
So I want to have the
airplane icon positioned

111
00:04:59.09 --> 00:05:03.07
outside of the top and
left areas of the aside.

112
00:05:03.07 --> 00:05:05.03
So let's come in here to the top property,

113
00:05:05.03 --> 00:05:08.07
let's set this to negative five pixels,

114
00:05:08.07 --> 00:05:11.03
and now we can see that this
item is actually showing up

115
00:05:11.03 --> 00:05:14.02
outside of that aside.

116
00:05:14.02 --> 00:05:17.00
Now the exact number that
I need to align the graphic

117
00:05:17.00 --> 00:05:21.01
is negative 10 pixels,
and now let's go over

118
00:05:21.01 --> 00:05:25.03
to the left property and set
this to negative 12 pixels.

119
00:05:25.03 --> 00:05:27.01
So now the airplane graphic
is positioned exactly

120
00:05:27.01 --> 00:05:30.08
where I want it, however
the heading three is now

121
00:05:30.08 --> 00:05:33.04
showing up underneath of this graphic.

122
00:05:33.04 --> 00:05:35.07
Now in the HTML, the image
tag is showing up before

123
00:05:35.07 --> 00:05:39.07
the H3, and typically the
browser will stack items

124
00:05:39.07 --> 00:05:42.00
in the order that they
show up in the HTML.

125
00:05:42.00 --> 00:05:44.09
So the H3 should be in front
of the airplane graphic,

126
00:05:44.09 --> 00:05:47.05
but again since we gave this
absolute position properties,

127
00:05:47.05 --> 00:05:49.08
it's not paying attention
to the natural flow.

128
00:05:49.08 --> 00:05:52.01
So what we can do to fix
this is we can come down to

129
00:05:52.01 --> 00:05:56.09
the aside space H3 and let's
add a position property

130
00:05:56.09 --> 00:06:00.02
of relative to this as well.

131
00:06:00.02 --> 00:06:01.09
And once we do that,
you'll see that this text

132
00:06:01.09 --> 00:06:04.04
now shows up over top of that image.

133
00:06:04.04 --> 00:06:07.03
And so now let's go style the hyperlink.

134
00:06:07.03 --> 00:06:09.06
So let's scroll down a little bit,

135
00:06:09.06 --> 00:06:12.07
we have an aside space A, and
with these properties here

136
00:06:12.07 --> 00:06:16.02
we're styling this link
to look like a button.

137
00:06:16.02 --> 00:06:17.09
So after border radius,
let's come down here

138
00:06:17.09 --> 00:06:21.00
and add position, we'll
set the value to absolute,

139
00:06:21.00 --> 00:06:25.00
and this time instead of
setting top and left properties,

140
00:06:25.00 --> 00:06:27.04
we're going to set bottom
and right properties.

141
00:06:27.04 --> 00:06:29.05
So let's come in here
and set bottom property.

142
00:06:29.05 --> 00:06:32.03
We're going to set this
to negative four pixels,

143
00:06:32.03 --> 00:06:34.08
and then we're going
to set a right property

144
00:06:34.08 --> 00:06:39.01
to negative four pixels.

145
00:06:39.01 --> 00:06:41.02
And so by setting bottom and
right, we are now aligning

146
00:06:41.02 --> 00:06:43.09
the bottom and right
areas of that anchor tag

147
00:06:43.09 --> 00:06:46.08
to the bottom and right
areas of the aside.

148
00:06:46.08 --> 00:06:48.04
So this is how we can pick
the registration point

149
00:06:48.04 --> 00:06:50.05
for how we're positioning the items.

150
00:06:50.05 --> 00:06:52.08
So typically you'll
either set top or bottom

151
00:06:52.08 --> 00:06:55.08
and right or left when you position items.

152
00:06:55.08 --> 00:06:57.06
So now that we have the
layout working inside

153
00:06:57.06 --> 00:07:00.03
of the aside element, let's
position the entire aside

154
00:07:00.03 --> 00:07:02.07
inside of the article.

155
00:07:02.07 --> 00:07:07.01
So let's scroll up, let's find the aside,

156
00:07:07.01 --> 00:07:08.09
let's come in here and
change position relative

157
00:07:08.09 --> 00:07:12.08
to absolute.

158
00:07:12.08 --> 00:07:15.02
Next line let's set a top
property, we'll set this

159
00:07:15.02 --> 00:07:19.03
to 65 pixels, then a space,
then we'll set a right

160
00:07:19.03 --> 00:07:24.02
property of 25 pixels.

161
00:07:24.02 --> 00:07:27.09
That's going to position the
aside over here to the right.

162
00:07:27.09 --> 00:07:32.04
Now in order to keep the text
from overlapping this content,

163
00:07:32.04 --> 00:07:34.07
let's come up here to the article element,

164
00:07:34.07 --> 00:07:38.01
let's come in and change
the padding right property

165
00:07:38.01 --> 00:07:41.00
to 260 pixels.

166
00:07:41.00 --> 00:07:44.02
So now If I was to come in
here in resize the browser,

167
00:07:44.02 --> 00:07:46.01
the text will never get
within 260 pixels of

168
00:07:46.01 --> 00:07:49.02
the right-hand side of the
article, always giving us

169
00:07:49.02 --> 00:07:51.09
room for the absolute positioned aside.

170
00:07:51.09 --> 00:07:55.04
Now to quickly take a look at
what fixed positioning will do

171
00:07:55.04 --> 00:07:57.08
let's come down to the
aside and let's change

172
00:07:57.08 --> 00:08:01.09
the position from absolute to fixed.

173
00:08:01.09 --> 00:08:06.07
So what this is going to do
is make that positioned item

174
00:08:06.07 --> 00:08:09.05
fixed to the browser window,
even if we have content

175
00:08:09.05 --> 00:08:11.03
to scroll.

176
00:08:11.03 --> 00:08:13.02
So to demonstrate this, I'll come in here

177
00:08:13.02 --> 00:08:15.06
and decrease the height of the browser,

178
00:08:15.06 --> 00:08:18.02
and if I come in here and
scroll, you'll notice that

179
00:08:18.02 --> 00:08:22.00
the aside now sticks based
on the browser's view port

180
00:08:22.00 --> 00:08:24.09
instead of paying attention
to any of the parent items

181
00:08:24.09 --> 00:08:27.03
which have position properties.

182
00:08:27.03 --> 00:08:29.06
And a lot of times you'll
see fixed position being used

183
00:08:29.06 --> 00:08:32.05
for things like navigation
panels, social media links,

184
00:08:32.05 --> 00:08:35.03
advertisements, newsletter
signups, and sometimes

185
00:08:35.03 --> 00:08:37.00
a web survey.

186
00:08:37.00 --> 00:08:38.05
And they do this so that
the content is always

187
00:08:38.05 --> 00:08:41.01
showing up on the screen.

188
00:08:41.01 --> 00:08:44.01
So let me increase my browser
back to the full height here.

189
00:08:44.01 --> 00:08:46.01
Let's come into the aside
and let's set this back

190
00:08:46.01 --> 00:08:48.08
to absolute.

191
00:08:48.08 --> 00:08:50.09
And now to make sure that
the layout will work on

192
00:08:50.09 --> 00:08:53.03
small screens, let's come
down here and add some rules

193
00:08:53.03 --> 00:08:55.05
inside of the media query.

194
00:08:55.05 --> 00:08:58.02
So at the bottom of the CSS,
I set up a media query here,

195
00:08:58.02 --> 00:09:01.00
with a maximum width of 540 pixels.

196
00:09:01.00 --> 00:09:04.02
So let's come in here and
reassign a couple properties.

197
00:09:04.02 --> 00:09:06.01
So first let's start with our article.

198
00:09:06.01 --> 00:09:09.00
So let's add an article selector.

199
00:09:09.00 --> 00:09:12.04
Let's come in here and
let's set padding right,

200
00:09:12.04 --> 00:09:18.02
we're going to set that back
to 25 pixels, let's save.

201
00:09:18.02 --> 00:09:24.01
Next line, let's target the aside.

202
00:09:24.01 --> 00:09:26.04
We're going to set the
position back to relative

203
00:09:26.04 --> 00:09:28.04
on the aside since we
won't have room for that

204
00:09:28.04 --> 00:09:31.03
to show in sort of a two-column view.

205
00:09:31.03 --> 00:09:33.06
And we're going to set the
top property back to auto,

206
00:09:33.06 --> 00:09:36.00
which means pick up the
values from where it would

207
00:09:36.00 --> 00:09:38.08
normally fall in an HTML flow.

208
00:09:38.08 --> 00:09:43.03
And we'll do the same thing for right.

209
00:09:43.03 --> 00:09:44.04
Let's save our work.

210
00:09:44.04 --> 00:09:46.08
I'll come over here and
size the browser down,

211
00:09:46.08 --> 00:09:50.02
and once we get under 540,
we can see that the content

212
00:09:50.02 --> 00:09:52.00
inside of the article
now flows the full width

213
00:09:52.00 --> 00:09:54.00
and the position properties
have been removed

214
00:09:54.00 --> 00:09:56.05
from the aside.

215
00:09:56.05 --> 00:09:58.01
Now one final property
I want to take a look at

216
00:09:58.01 --> 00:10:00.00
is position static.

217
00:10:00.00 --> 00:10:02.03
What position static does
is basically the same thing

218
00:10:02.03 --> 00:10:05.01
as assigning no position values.

219
00:10:05.01 --> 00:10:07.02
However, if you have an
item that already has

220
00:10:07.02 --> 00:10:10.02
position values, we need
a value to assign to that

221
00:10:10.02 --> 00:10:12.06
in order to remove them.

222
00:10:12.06 --> 00:10:14.04
And we don't have anything
like position auto

223
00:10:14.04 --> 00:10:17.04
instead the value's
called position static.

224
00:10:17.04 --> 00:10:20.00
So for example, if I want to
take this anchor link here

225
00:10:20.00 --> 00:10:23.06
and no longer have it positioned
to the bottom and right,

226
00:10:23.06 --> 00:10:26.07
what I could do inside of my
media query is come in here

227
00:10:26.07 --> 00:10:31.02
and assign a position
static to that anchor tag.

228
00:10:31.02 --> 00:10:33.09
So let's target the aside space A,

229
00:10:33.09 --> 00:10:40.06
let's come in here and
set position to static.

230
00:10:40.06 --> 00:10:42.04
And now in the preview, we
can see that that element

231
00:10:42.04 --> 00:10:45.00
will now flow with the
rest of the HTML elements

232
00:10:45.00 --> 00:10:47.08
as if it had no position
properties at all.

233
00:10:47.08 --> 00:10:49.04
And with that, we've looked
at examples of using each

234
00:10:49.04 --> 00:10:51.07
of the different positioning
properties available

235
00:10:51.07 --> 00:10:53.03
to us in CSS.

236
00:10:53.03 --> 00:10:55.03
Now if you'd like to learn
more about positioning

237
00:10:55.03 --> 00:10:58.00
techniques in conjunction
with CSS pseudo-elements,

238
00:10:58.00 --> 00:11:00.07
check out our course called
"Creating a Pull Quote with CSS"

239
00:11:00.07 --> 00:11:04.00
and if you want to dive deeper
into creating advertisements

240
00:11:04.00 --> 00:11:07.03
with HTML5, which rely
heavily on CSS positioning,

241
00:11:07.03 --> 00:11:09.07
check out chapter one of our course on

242
00:11:09.07 --> 00:11:13.02
"Creating an HTML5 Banner
Ad with GreenSock."

243
00:11:13.02 --> 00:11:15.08
And so that concludes our
brief look at CSS positioning,

244
00:11:15.08 --> 00:11:18.08
and as always, thanks for watching.