0:00:00.000,0:00:02.233
Now we'll learn how to use CSS

0:00:02.233,0:00:04.233
To really move things around.

0:00:04.233,0:00:06.004
Not just put them next to each other.

0:00:06.004,0:00:07.637
But to actually put things

0:00:07.637,0:00:09.029
On top of each other.

0:00:09.029,0:00:11.611
Here, we have a webpage

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

0:00:16.041,0:00:18.069
Paragraphs down here

0:00:18.069,0:00:20.155
And its currently all laid out with

0:00:20.155,0:00:22.177
The default positioning strategy

0:00:22.177,0:00:24.212
Which the browser uses

0:00:24.212,0:00:26.959
Which we call static or normal positioning

0:00:26.959,0:00:29.388
It just means that in line elements

0:00:29.388,0:00:30.699
Like images

0:00:30.699,0:00:32.297
Are laid from left to right

0:00:32.297,0:00:33.800
And block elements

0:00:33.800,0:00:35.490
Like headers and paragraphs

0:00:35.490,0:00:37.565
Are laid out from top to bottom

0:00:37.565,0:00:39.915
We can change that positioning strategy

0:00:39.915,0:00:42.670
Using the CSS position property

0:00:42.670,0:00:45.621
Let's try it on the landscape image

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

0:00:49.657,0:00:51.446
Relative for the value

0:00:51.446,0:00:53.406
The relative position strategy

0:00:53.406,0:00:55.407
Means position it how you normally would

0:00:55.407,0:00:57.791
But then offset it by some amount

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

0:01:00.156,0:01:01.501
We want to offset by

0:01:01.501,0:01:03.140
We need to use some combination

0:01:03.140,0:01:05.179
Of four new CSS properties

0:01:05.179,0:01:07.425
Top, bottom, and left, and right

0:01:07.425,0:01:09.441
Like let's say we wanna have it be

0:01:09.441,0:01:11.875
Twenty pixels down

0:01:11.875,0:01:13.626
Say top twenty pixs

0:01:13.626,0:01:15.222
And ten pixels over

0:01:15.222,0:01:16.675
We'll say left ten pixs

0:01:16.675,0:01:18.668
So that's kind of neat,

0:01:18.668,0:01:20.893
But not really that neat

0:01:20.893,0:01:23.472
I wanna show you something waaay cooler

0:01:23.472,0:01:25.077
Absolute positioning

0:01:25.077,0:01:26.583
We can use it to take an element

0:01:26.583,0:01:28.525
Completely out of the normal flow

0:01:28.525,0:01:30.613
And put it anywhere on the screen

0:01:30.613,0:01:31.664
To do that

0:01:31.664,0:01:32.945
I will change relative

0:01:32.945,0:01:34.042
To absolute

0:01:34.042,0:01:35.199
On the landscape

0:01:35.199,0:01:36.575
And keep the top left

0:01:36.575,0:01:37.778
And you can see

0:01:37.778,0:01:39.213
That landscape is now

0:01:39.213,0:01:41.705
Hiding our images and dance party heading

0:01:41.705,0:01:42.772
And now we're going to fix that

0:01:42.772,0:01:44.791
Let's start with Winston

0:01:44.791,0:01:48.456
So we'll add a rule for Winston

0:01:48.456,0:01:52.096
And give Winston a position absolute

0:01:52.096,0:01:54.302
And then let me say

0:01:54.302,0:01:56.110
Top forty pixs

0:01:56.110,0:01:58.394
Oh, let's say top fifty pixs

0:01:58.394,0:02:00.055
And then left fifty pixs

0:02:00.055,0:02:02.204
Ok, that looks good

0:02:02.204,0:02:04.302
And hopper is really eager to get on top

0:02:04.302,0:02:05.617
As well

0:02:05.617,0:02:07.295
So let's say Hopper also needs

0:02:07.295,0:02:11.661
A position absolute

0:02:11.661,0:02:15.218
And let's say top thirty pixs

0:02:15.218,0:02:17.814
And left sixty pixs

0:02:17.814,0:02:19.613
Ok, so my goal is

0:02:19.613,0:02:21.216
To make it look like Hopper

0:02:21.216,0:02:23.743
Is kind of dancing in front of Winston

0:02:23.743,0:02:26.640
But right now it doesn't look that way

0:02:26.640,0:02:28.244
Because Winston is being drawn

0:02:28.244,0:02:30.358
On top of Hopper

0:02:30.358,0:02:31.948
To fix this,

0:02:31.948,0:02:33.619
I could either change the order of

0:02:33.619,0:02:35.136
The actual image tags

0:02:35.136,0:02:36.684
In the html

0:02:36.684,0:02:38.699
But a kind of better way is

0:02:38.699,0:02:42.257
To use the CSS z index property

0:02:42.257,0:02:43.939
We can use that to tell the browser

0:02:43.939,0:02:45.236
Exactly what order to draw

0:02:45.236,0:02:46.035
Elements in

0:02:46.035,0:02:47.384
By giving them differency

0:02:47.384,0:02:48.247
Indexes

0:02:48.247,0:02:50.691
So I'll start with a landscape

0:02:50.691,0:02:53.268
And give it a z index of one

0:02:53.268,0:02:56.345
And Winston goes on top with two

0:02:56.345,0:02:59.054
Hopper goes on top with three

0:02:59.054,0:03:00.081
Alright!

0:03:00.081,0:03:02.641
Now Hopper is dancing in front of Winston

0:03:02.641,0:03:04.178
Even if he doesn't like that

0:03:04.178,0:03:05.239
But he'll have to deal

0:03:05.239,0:03:07.801
But now we still have headings

0:03:07.801,0:03:09.991
And columns that are hidden

0:03:09.991,0:03:12.450
So let's see, let's try

0:03:12.450,0:03:13.942
And get the, maybe I want the

0:03:13.942,0:03:16.886
Dance party to be on top of everything

0:03:16.886,0:03:19.081
So I'm also gonna give that

0:03:19.081,0:03:20.698
Position absolute

0:03:20.698,0:03:21.757
And z index four

0:03:21.757,0:03:22.997
Ok, looks good

0:03:22.997,0:03:24.421
Maybe left ten pixs

0:03:24.421,0:03:25.252
Just move it over

0:03:25.252,0:03:26.912
Maybe, maybe a bit more

0:03:26.912,0:03:28.518
Alright, that looks good

0:03:28.518,0:03:29.688
Now, for the song lyrics

0:03:29.688,0:03:31.113
I actually just want them to

0:03:31.113,0:03:32.816
display underneath everything

0:03:32.816,0:03:35.525
So for those I'm thinking

0:03:35.525,0:03:38.219
Position relative and then

0:03:38.219,0:03:39.468
We could just do a top

0:03:39.468,0:03:40.679
Which is you know,

0:03:40.679,0:03:42.574
Would equal the height of the image

0:03:42.574,0:03:45.119
It would be two hundred twenty pixels

0:03:45.119,0:03:48.425
Alright, so that is looking really good

0:03:48.425,0:03:50.129
We've got a crazy dance party

0:03:50.129,0:03:52.179
Going on now

0:03:52.179,0:03:53.822
Now, if you pause a talkthrough

0:03:53.822,0:03:55.770
And try scrolling the page

0:03:55.770,0:03:58.051
You'll see that everything

0:03:58.051,0:03:59.209
Scrolls together

0:03:59.209,0:04:00.989
And the important thing is

0:04:00.989,0:04:02.616
That absolute positioning is relative

0:04:02.616,0:04:04.053
To the top of the webpage

0:04:04.053,0:04:06.017
So, as you scroll down the webpage

0:04:06.040,0:04:07.733
Things that were ten pixels

0:04:07.733,0:04:10.550
Top, are going to be moving off screen

0:04:10.550,0:04:11.919
Because you are going farther away from

0:04:11.919,0:04:14.640
The top of the webpage

0:04:14.640,0:04:15.807
Another option is

0:04:15.807,0:04:17.109
Fixed positioning

0:04:17.109,0:04:18.765
Which will actually make it seem like

0:04:18.765,0:04:20.354
Things don't move at all

0:04:20.354,0:04:22.097
And, if you want to try that out

0:04:22.097,0:04:23.051
We can just change

0:04:23.051,0:04:25.693
h1 from absolute to fixed

0:04:25.693,0:04:29.073
And now, pause and try scrolling

0:04:29.073,0:04:31.085
And you will see that

0:04:31.085,0:04:33.678
Dance party just stays in the same place

0:04:33.678,0:04:35.667
Because now, it is actaully

0:04:35.667,0:04:39.216
Relative to the top of the screen

0:04:39.216,0:04:40.852
The window

0:04:40.852,0:04:43.917
Ok, so we've managed to use

0:04:43.917,0:04:45.941
Three different position properties

0:04:45.941,0:04:47.697
To do some pretty cool stuff

0:04:47.697,0:04:48.519
When would we

0:04:48.519,0:04:51.071
Actually use absolute or fixed positioning

0:04:51.071,0:04:53.109
Well, you could use them

0:04:53.109,0:04:54.183
To make a game,

0:04:54.183,0:04:55.693
Like I did here

0:04:55.693,0:04:57.219
Because you'll want to layout all

0:04:57.219,0:04:58.864
The parts of the scene in the browser

0:04:58.864,0:05:00.229
But you can also use them

0:05:00.229,0:05:01.634
For normal webpages

0:05:01.634,0:05:03.026
Like on Khan Academy

0:05:03.026,0:05:04.383
We use absolute positioning for the models

0:05:04.383,0:05:06.279
That pop up in the middle of the page

0:05:06.279,0:05:07.650
And use fixed positioning

0:05:07.650,0:05:08.751
For the search box on out team page

0:05:08.751,0:05:11.813
So that it is always visible as you scroll

0:05:11.813,0:05:14.232
You probably won't use positioning

0:05:14.232,0:05:15.431
In every webpage

0:05:15.431,0:05:16.704
But when you do use it

0:05:16.704,0:05:18.967
You'll be really happy that it exists