All language subtitles for 048 Absolute positioning.en_US

Now in the last lesson we looked at how we can give our elements a relative position.

So that's a position that's relative to where the element would have been had we followed the natural

HTML flow.

So for example in this case by making the image 30 pixels from the right relative to its previous position

then we're basically saying that there should be a right margin between the image and where it used

to be in the value of 30 pixels.

Now I want to talk about a different way of positioning which is using the absolute position.

So in this case I've got an image that's inside a div. So the div is colored red and it has a relative

position.

Now our image is nested inside that div,

and I've given it an absolute position.

Now if I changed the right coordinate property to 30 pixels it's not going to shift left by 30 pixels.

No.

In fact it's going to shift to the right of the screen.

And this is because with absolute positioning we are positioning the element,

so in this case the image element, relative to its parent, and in this case its parent is that red div.

So we now have added a right margin of 30 pixels between the image element and the parent div.

Now admittedly the naming is a little bit confusing as I would have probably called absolute positioning

relative positioning because we're always specifying a margin that's relative to its parent.

But I think the reason why they called it absolute position is because in most cases the parent is simply

the entire body of the web page.

So the position when you're using absolute positioning looks like you're giving it a margin relative

to the entire page which looks like you're changing the absolute position of it.

But don't get confused about the naming.

Just remember that relative positioning means that you're adding a margin relative to where the element

should have been,

but absolute position means that you're adding a margin to its parent element.

So in this case we've still got our three divs inside a parent element that's the body element.

Now let's get rid of our display and our position for all of our divs so that we now have three squares that

are stacked vertically on top of each other, which are all block elements, so they are resting on different

lines.

Now if I set the position of my first red square to absolute,

and I give it a left margin of say 200 pixels the first thing that you notice is that by using absolute positioning

it does affect the flow of your HTML.

So unlike when we use relative positioning where we left behind some sort of ghost element where it

still kept the positions of everything else the same,

but when you're using absolute positioning, you're actually taking the element out of the flow of the document

and it's no longer considered a part of the natural flow of the document.

So that's why the blue square and the yellow square have shifted up, because it's as if I've just gone

and deleted that div. Basically red is now dead to blue and yellow.

It's like as if they never had a friendship before.

But the cool thing is that I can now move this red square anywhere on screen relative to its parent,

which is the entire body.

So for example I could say right 20 pixels and that will just give it a right margin of 20 pixels from

the right of its parent, which is the body.

And so as a challenge I want you to complete exactly the same task but it's going to be a little bit

different this time.

Now this is what you're aiming for.

You're aiming for three squares, still 100 pixels by 100 pixels, that are touching each other corner to

corner.

And this time I want you to make it pixel perfect so they are right up next to each other touching each

other exactly on their corners.

And it should be yellow, then blue, then red, and you're going to use the absolute position system in order

to do this.

So pause the video and give it a go now.

So in order to achieve the design that we want the first thing that I'm going to do is I'm going to

add a position absolute to all of our divs.

Now the yellow is almost exactly where it's meant to be

apart from one slight problem.

And this was a bit of a trick question in there to see if you remembered what we did before.

You can see that we're trying to get the yellow to touch with the left and the top edge.

Now I appreciate it's a little bit difficult to see because of how bright that yellow is, but if you look

carefully you can see that there's definitely a margin there between the yellow and the edge of the

screen.

And the reason for that is because, remember, everything is nested inside our HTML body, and our

browser has default CSS rules for the body, and we have to get rid of those if we want to have no margin.

So let's first target the body and set the margin to be zero

around all four sides,

so that our yellow square can touch the edge, and that makes our Maths a little bit easier when we're trying

to figure out how to get the squares touching corner to corner.

So we've got yellow in the right position.

The next thing is the blue.

So if we're positioning the blue square relative to the parent which is the body then all we need to

do is give it a left margin of 100 pixels

and a top margin of 100 pixels, and now blue is touching yellow

corner to corner.

And finally we can go to our red, and we can change its top margin to 200 pixels and its left margin to

200 pixels and we are now pixel perfect with our solution.

And we've created the design that we wanted.

So how did that go?

You would have noticed that it's a lot easier moving things around using absolute positioning when you're

just thinking about it being relative to the body.

And in this case if you wanted your squares to be touching each other pixel perfect with no space between

them then it's very very easy to do because in this case all three elements are positioning themselves

relative to the same thing which is the body of the web page and not two different things like where

they used to be.

And this is usually a much easier way for people to think about lay out although in most cases you will

find yourself using maybe a combination of both,

especially when you want to keep the other elements on screen still in the same flow as what it used

to be before you started positioning one element.

So they're both really really useful and you'll see both of them really commonly across web site

CSS. Now one thing to remember is that the parent doesn't always have to be the body.

It can also be the closest parent that has a relative layer.

So for example if we put another div around our red square and we set it's position,

so this is called container,

we set it's position to be relative,

and we don't change it.

We're not going to touch it.

But this sets up this container to be a perfect parent for our absolute positioning.

So let's give it a width of say 300 pixels, height of 300 pixels, and let's give it a background color

of grey.

Now you can see this container.

Now you'll notice that the design for our web page has now changed and quite dramatically so because

now our red square is a child of that parent container.

And now it's defining its position relative to that grey container square.

So if I delete that left 200 and instead I say right 20 pixels it's no longer having a right margin

of 20 pixels from the edge of the body,

but it's now relative to its parent container.

And even though our other squares, our blue and yellow, are still relative to the body, because we haven't

defined a vertical position for it,

it's being pushed down by this element with a relative layer.

So we can change this by giving it a top property of zero.

And when ever you're using zero, you don't actually have to specify a unit like pixels or percent. And let's

do the same for our yellow square as well.

And let's push our red square over and let's push our red square over so that it is right zero.

And you can see that we've got exactly the same layout but this time because red is nested in a container

we're using completely different code.

And the beauty of this is that you can use containers to fine tune the position of your elements on

screen by using a combination of absolute and relative positioning.

Now the last thing I want to show you before we finish our section on positioning is, I want to show

you that last value which is the fixed position.

So for example if I change the yellow's position from absolute to fixed and I say that it is fixed to

the top then if I scroll through the web page it will stay in its current position.

Now I can show you this.

If I create some h1s in here just to give ourselves a bit more space so that we can actually scroll

through our web site.

So I'm just going to copy and paste a whole bunch of these.

So we've now got a whole bunch of h1s, and we can scroll through our web page, and you'll notice that

the yellow div stays exactly where it is fixed in its position relative to the body of the web site,

and it doesn't move despite all my scrolling.

So this is really useful if you have a nav bar that you that you want to be fixed so that it follows

the user as they scroll through your web site or sometimes you might have a side bar that you want to stay

fixed,

and this is how you would do it.

So that's all I wanted to cover for the CSS position property. In the next lesson we're going to look

at how we can further improve our web site by using what we've just learned.