CSS positioning

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