WEBVTT

00:00:00.000 --> 00:00:02.233
Now we'll learn how to use CSS

00:00:02.233 --> 00:00:04.233
To really move things around.

00:00:04.233 --> 00:00:06.004
Not just put them next to each other.

00:00:06.004 --> 00:00:07.637
But to actually put things

00:00:07.637 --> 00:00:09.029
On top of each other.

00:00:09.029 --> 00:00:11.611
Here, we have a webpage

00:00:11.611 --> 00:00:16.041
With a few headers, and images, and some

00:00:16.041 --> 00:00:18.069
Paragraphs down here

00:00:18.069 --> 00:00:20.155
And its currently all laid out with

00:00:20.155 --> 00:00:22.177
The default positioning strategy

00:00:22.177 --> 00:00:24.212
Which the browser uses

00:00:24.212 --> 00:00:26.959
Which we call static or normal positioning

00:00:26.959 --> 00:00:29.388
It just means that in line elements

00:00:29.388 --> 00:00:30.699
Like images

00:00:30.699 --> 00:00:32.297
Are laid from left to right

00:00:32.297 --> 00:00:33.800
And block elements

00:00:33.800 --> 00:00:35.490
Like headers and paragraphs

00:00:35.490 --> 00:00:37.565
Are laid out from top to bottom

00:00:37.565 --> 00:00:39.915
We can change that positioning strategy

00:00:39.915 --> 00:00:42.670
Using the CSS position property

00:00:42.670 --> 00:00:45.621
Let's try it on the landscape image

00:00:45.621 --> 00:00:49.657
We'll type position, colon, and then

00:00:49.657 --> 00:00:51.446
Relative for the value

00:00:51.446 --> 00:00:53.406
The relative position strategy

00:00:53.406 --> 00:00:55.407
Means position it how you normally would

00:00:55.407 --> 00:00:57.791
But then offset it by some amount

00:00:57.791 --> 00:01:00.156
Now, to tell the browser what amount

00:01:00.156 --> 00:01:01.501
We want to offset by

00:01:01.501 --> 00:01:03.140
We need to use some combination

00:01:03.140 --> 00:01:05.179
Of four new CSS properties

00:01:05.179 --> 00:01:07.425
Top, bottom, and left, and right

00:01:07.425 --> 00:01:09.441
Like let's say we wanna have it be

00:01:09.441 --> 00:01:11.875
Twenty pixels down

00:01:11.875 --> 00:01:13.626
Say top twenty pixs

00:01:13.626 --> 00:01:15.222
And ten pixels over

00:01:15.222 --> 00:01:16.675
We'll say left ten pixs

00:01:16.675 --> 00:01:18.668
So that's kind of neat,

00:01:18.668 --> 00:01:20.893
But not really that neat

00:01:20.893 --> 00:01:23.472
I wanna show you something waaay cooler

00:01:23.472 --> 00:01:25.077
Absolute positioning

00:01:25.077 --> 00:01:26.583
We can use it to take an element

00:01:26.583 --> 00:01:28.525
Completely out of the normal flow

00:01:28.525 --> 00:01:30.613
And put it anywhere on the screen

00:01:30.613 --> 00:01:31.664
To do that

00:01:31.664 --> 00:01:32.945
I will change relative

00:01:32.945 --> 00:01:34.042
To absolute

00:01:34.042 --> 00:01:35.199
On the landscape

00:01:35.199 --> 00:01:36.575
And keep the top left

00:01:36.575 --> 00:01:37.778
And you can see

00:01:37.778 --> 00:01:39.213
That landscape is now

00:01:39.213 --> 00:01:41.705
Hiding our images and dance party heading

00:01:41.705 --> 00:01:42.772
And now we're going to fix that

00:01:42.772 --> 00:01:44.791
Let's start with Winston

00:01:44.791 --> 00:01:48.456
So we'll add a rule for Winston

00:01:48.456 --> 00:01:52.096
And give Winston a position absolute

00:01:52.096 --> 00:01:54.302
And then let me say

00:01:54.302 --> 00:01:56.110
Top forty pixs

00:01:56.110 --> 00:01:58.394
Oh, let's say top fifty pixs

00:01:58.394 --> 00:02:00.055
And then left fifty pixs

00:02:00.055 --> 00:02:02.204
Ok, that looks good

00:02:02.204 --> 00:02:04.302
And hopper is really eager to get on top

00:02:04.302 --> 00:02:05.617
As well

00:02:05.617 --> 00:02:07.295
So let's say Hopper also needs

00:02:07.295 --> 00:02:11.661
A position absolute

00:02:11.661 --> 00:02:15.218
And let's say top thirty pixs

00:02:15.218 --> 00:02:17.814
And left sixty pixs

00:02:17.814 --> 00:02:19.613
Ok, so my goal is

00:02:19.613 --> 00:02:21.216
To make it look like Hopper

00:02:21.216 --> 00:02:23.743
Is kind of dancing in front of Winston

00:02:23.743 --> 00:02:26.640
But right now it doesn't look that way

00:02:26.640 --> 00:02:28.244
Because Winston is being drawn

00:02:28.244 --> 00:02:30.358
On top of Hopper

00:02:30.358 --> 00:02:31.948
To fix this,

00:02:31.948 --> 00:02:33.619
I could either change the order of

00:02:33.619 --> 00:02:35.136
The actual image tags

00:02:35.136 --> 00:02:36.684
In the html

00:02:36.684 --> 00:02:38.699
But a kind of better way is

00:02:38.699 --> 00:02:42.257
To use the CSS z index property

00:02:42.257 --> 00:02:43.939
We can use that to tell the browser

00:02:43.939 --> 00:02:45.236
Exactly what order to draw

00:02:45.236 --> 00:02:46.035
Elements in

00:02:46.035 --> 00:02:47.384
By giving them differency

00:02:47.384 --> 00:02:48.247
Indexes

00:02:48.247 --> 00:02:50.691
So I'll start with a landscape

00:02:50.691 --> 00:02:53.268
And give it a z index of one

00:02:53.268 --> 00:02:56.345
And Winston goes on top with two

00:02:56.345 --> 00:02:59.054
Hopper goes on top with three

00:02:59.054 --> 00:03:00.081
Alright!

00:03:00.081 --> 00:03:02.641
Now Hopper is dancing in front of Winston

00:03:02.641 --> 00:03:04.178
Even if he doesn't like that

00:03:04.178 --> 00:03:05.239
But he'll have to deal

00:03:05.239 --> 00:03:07.801
But now we still have headings

00:03:07.801 --> 00:03:09.991
And columns that are hidden

00:03:09.991 --> 00:03:12.450
So let's see, let's try

00:03:12.450 --> 00:03:13.942
And get the, maybe I want the

00:03:13.942 --> 00:03:16.886
Dance party to be on top of everything

00:03:16.886 --> 00:03:19.081
So I'm also gonna give that

00:03:19.081 --> 00:03:20.698
Position absolute

00:03:20.698 --> 00:03:21.757
And z index four

00:03:21.757 --> 00:03:22.997
Ok, looks good

00:03:22.997 --> 00:03:24.421
Maybe left ten pixs

00:03:24.421 --> 00:03:25.252
Just move it over

00:03:25.252 --> 00:03:26.912
Maybe, maybe a bit more

00:03:26.912 --> 00:03:28.518
Alright, that looks good

00:03:28.518 --> 00:03:29.688
Now, for the song lyrics

00:03:29.688 --> 00:03:31.113
I actually just want them to

00:03:31.113 --> 00:03:32.816
display underneath everything

00:03:32.816 --> 00:03:35.525
So for those I'm thinking

00:03:35.525 --> 00:03:38.219
Position relative and then

00:03:38.219 --> 00:03:39.468
We could just do a top

00:03:39.468 --> 00:03:40.679
Which is you know,

00:03:40.679 --> 00:03:42.574
Would equal the height of the image

00:03:42.574 --> 00:03:45.119
It would be two hundred twenty pixels

00:03:45.119 --> 00:03:48.425
Alright, so that is looking really good

00:03:48.425 --> 00:03:50.129
We've got a crazy dance party

00:03:50.129 --> 00:03:52.179
Going on now

00:03:52.179 --> 00:03:53.822
Now, if you pause a talkthrough

00:03:53.822 --> 00:03:55.770
And try scrolling the page

00:03:55.770 --> 00:03:58.051
You'll see that everything

00:03:58.051 --> 00:03:59.209
Scrolls together

00:03:59.209 --> 00:04:00.989
And the important thing is

00:04:00.989 --> 00:04:02.616
That absolute positioning is relative

00:04:02.616 --> 00:04:04.053
To the top of the webpage

00:04:04.053 --> 00:04:06.017
So, as you scroll down the webpage

00:04:06.040 --> 00:04:07.733
Things that were ten pixels

00:04:07.733 --> 00:04:10.550
Top, are going to be moving off screen

00:04:10.550 --> 00:04:11.919
Because you are going farther away from

00:04:11.919 --> 00:04:14.640
The top of the webpage

00:04:14.640 --> 00:04:15.807
Another option is

00:04:15.807 --> 00:04:17.109
Fixed positioning

00:04:17.109 --> 00:04:18.765
Which will actually make it seem like

00:04:18.765 --> 00:04:20.354
Things don't move at all

00:04:20.354 --> 00:04:22.097
And, if you want to try that out

00:04:22.097 --> 00:04:23.051
We can just change

00:04:23.051 --> 00:04:25.693
h1 from absolute to fixed

00:04:25.693 --> 00:04:29.073
And now, pause and try scrolling

00:04:29.073 --> 00:04:31.085
And you will see that

00:04:31.085 --> 00:04:33.678
Dance party just stays in the same place

00:04:33.678 --> 00:04:35.667
Because now, it is actaully

00:04:35.667 --> 00:04:39.216
Relative to the top of the screen

00:04:39.216 --> 00:04:40.852
The window

00:04:40.852 --> 00:04:43.917
Ok, so we've managed to use

00:04:43.917 --> 00:04:45.941
Three different position properties

00:04:45.941 --> 00:04:47.697
To do some pretty cool stuff

00:04:47.697 --> 00:04:48.519
When would we

00:04:48.519 --> 00:04:51.071
Actually use absolute or fixed positioning

00:04:51.071 --> 00:04:53.109
Well, you could use them

00:04:53.109 --> 00:04:54.183
To make a game,

00:04:54.183 --> 00:04:55.693
Like I did here

00:04:55.693 --> 00:04:57.219
Because you'll want to layout all

00:04:57.219 --> 00:04:58.864
The parts of the scene in the browser

00:04:58.864 --> 00:05:00.229
But you can also use them

00:05:00.229 --> 00:05:01.634
For normal webpages

00:05:01.634 --> 00:05:03.026
Like on Khan Academy

00:05:03.026 --> 00:05:04.383
We use absolute positioning for the models

00:05:04.383 --> 00:05:06.279
That pop up in the middle of the page

00:05:06.279 --> 00:05:07.650
And use fixed positioning

00:05:07.650 --> 00:05:08.751
For the search box on out team page

00:05:08.751 --> 00:05:11.813
So that it is always visible as you scroll

00:05:11.813 --> 00:05:14.232
You probably won't use positioning

00:05:14.232 --> 00:05:15.431
In every webpage

00:05:15.431 --> 00:05:16.704
But when you do use it

00:05:16.704 --> 00:05:18.967
You'll be really happy that it exists