Now we'll learn how to use CSS
To really move things around.
Not just put them next to each other.
But to actually put things
On top of each other.
Here, we have a webpage
With a few headers, and images, and some
Paragraphs down here
And its currently all laid out with
The default positioning strategy
Which the browser uses
Which we call static or normal positioning
It just means that in line elements
Like images
Are laid from left to right
And block elements
Like headers and paragraphs
Are laid out from top to bottom
We can change that positioning strategy
Using the CSS position property
Let's try it on the landscape image
We'll type position, colon, and then
Relative for the value
The relative position strategy
Means position it how you normally would
But then offset it by some amount
Now, to tell the browser what amount
We want to offset by
We need to use some combination
Of four new CSS properties
Top, bottom, and left, and right
Like let's say we wanna have it be
Twenty pixels down
Say top twenty pixs
And ten pixels over
We'll say left ten pixs
So that's kind of neat,
But not really that neat
I wanna show you something waaay cooler
Absolute positioning
We can use it to take an element
Completely out of the normal flow
And put it anywhere on the screen
To do that
I will change relative
To absolute
On the landscape
And keep the top left
And you can see
That landscape is now
Hiding our images and dance party heading
And now we're going to fix that
Let's start with Winston
So we'll add a rule for Winston
And give Winston a position absolute
And then let me say
Top forty pixs
Oh, let's say top fifty pixs
And then left fifty pixs
Ok, that looks good
And hopper is really eager to get on top
As well
So let's say Hopper also needs
A position absolute
And let's say top thirty pixs
And left sixty pixs
Ok, so my goal is
To make it look like Hopper
Is kind of dancing in front of Winston
But right now it doesn't look that way
Because Winston is being drawn
On top of Hopper
To fix this,
I could either change the order of
The actual image tags
In the html
But a kind of better way is
To use the CSS z index property
We can use that to tell the browser
Exactly what order to draw
Elements in
By giving them differency
Indexes
So I'll start with a landscape
And give it a z index of one
And Winston goes on top with two
Hopper goes on top with three
Alright!
Now Hopper is dancing in front of Winston
Even if he doesn't like that
But he'll have to deal
But now we still have headings
And columns that are hidden
So let's see, let's try
And get the, maybe I want the
Dance party to be on top of everything
So I'm also gonna give that
Position absolute
And z index four
Ok, looks good
Maybe left ten pixs
Just move it over
Maybe, maybe a bit more
Alright, that looks good
Now, for the song lyrics
I actually just want them to
display underneath everything
So for those I'm thinking
Position relative and then
We could just do a top
Which is you know,
Would equal the height of the image
It would be two hundred twenty pixels
Alright, so that is looking really good
We've got a crazy dance party
Going on now
Now, if you pause a talkthrough
And try scrolling the page
You'll see that everything
Scrolls together
And the important thing is
That absolute positioning is relative
To the top of the webpage
So, as you scroll down the webpage
Things that were ten pixels
Top, are going to be moving off screen
Because you are going farther away from
The top of the webpage
Another option is
Fixed positioning
Which will actually make it seem like
Things don't move at all
And, if you want to try that out
We can just change
h1 from absolute to fixed
And now, pause and try scrolling
And you will see that
Dance party just stays in the same place
Because now, it is actaully
Relative to the top of the screen
The window
Ok, so we've managed to use
Three different position properties
To do some pretty cool stuff
When would we
Actually use absolute or fixed positioning
Well, you could use them
To make a game,
Like I did here
Because you'll want to layout all
The parts of the scene in the browser
But you can also use them
For normal webpages
Like on Khan Academy
We use absolute positioning for the models
That pop up in the middle of the page
And use fixed positioning
For the search box on out team page
So that it is always visible as you scroll
You probably won't use positioning
In every webpage
But when you do use it
You'll be really happy that it exists