Original subtitles

Let's talk about

another extremely important aspect of CSS,

which are positioning modes.

And this one is one of the more complex lectures

of this section

and so make sure to pay good attention.

So in CSS,

there are a couple of different positioning modes.

But the more important ones

and the ones we are going to talk about for now

are the normal flow and absolute positioning.

So starting with normal flow,

it is simply the default positioning of elements

on our page.

Or we can also achieve the normal flow

by setting position to the value of relative.

So in this case, we say that an element is 'in flow',

which basically means that the elements are laid out

according to the source code in the HTML.

So this is very straightforward.

It is simply the behavior that we have been seeing

up until this point.

So just keep in mind that that is called normal flow.

Now on the other hand, we have absolute positioning,

which basically allows us to absolutely position elements

anywhere on the page.

Now we can achieve this positioning mode,

so we can position an element absolutely

by setting it's position property

to the value of absolute.

And so in this case,

the element is then removed from the normal flow

and we say that it is 'out of flow'.

Now what happens with this element is

that it completely loses any impact on surrounding elements.

And in fact, it might even overlap them.

So that's something common that happens

with absolutely positioned elements.

Now, in order to actually position the element

that is absolutely positioned,

we can use the top, bottom, left or right properties

in order to position that element.

And that positioning is going to happen in relation

to a relatively positioned container.

Now, I know that this sounds kind of confusing

and so let's actually see this happening in practice.

So what we're going to do in this lecture is

to create a Like button that is located outside

of our centered container.

So let me show that in the demo.

And so here at the very end, we have this Like button.

And as we expand the page for example,

you see that this element always stays

on exactly the same position, right?

So it's not impacted by any of the surrounding elements

and that is even better visible

if we decrease the page even further.

So here we even have that situation where the element

actually overlaps this related posts element right here.

Right?

And so you'll see that this element is not impacting

and it's also not being impacted

by any of the surrounding elements.

It always just simply stays here in this place,

no matter what happens to the rest of the page.

And so this is a great example

of an absolutely positioned element.

Now where should we actually put the mark-up

for this button?

So the HTML...

Well, it doesn't really matter at least for now.

So let's just actually put it here at the end of the body.

So after any other element.

So actually even after the container.

But again, for now that's not the most important part

and we will change this a little bit later.

So let's use the button element

that we have also used in our coding challenges already.

And then here I'm just going to write 'Like',

and then let's just add a nice emoji here,

which in Windows you can do

by hitting control command and space at the same time.

And on Windows, you can open up the emoji picker

by hitting the Windows key plus the dot.

So this is not any VS code extension.

This is simply functionality that is provided

by the operating system.

So again, control command space on the Mac

and Windows plus the dot on Windows 10.

So let's just search for hearts here

and... yeah.

VS code kind of transforms this

into this gray symbol here for some reason.

But nevermind about that.

So let's just come here

and our button should be somewhere here now.

And so right now, it is simply here.

So simply after all the other elements,

because for now, of course, it is in the normal flow still.

So we haven't declared position absolute on it yet.

And so therefore it is simply in the flow

and it's simply positioned right

after all the other elements.

But now let's actually change that.

So let's select the tier using button.

Let's first give it some visual styles.

Adding some padding as well.

And we can also use that trick

of defining the cursor property,

as I also show it to you in the challenge,

and set it to pointer so that we actually get that hand.

Right?

So now it looks a little bit nicer.

And you'll see there's also this hover state,

which we could of course customize,

but let's not spend time on that.

But instead we will now immediately set the position

to absolute just like I showed you in the previous slide.

So let's give it a save and see what it looks like.

But for now it still looks pretty similar.

And that's because we didn't really position it yet

using one of the four properties that I also mentioned,

so top, left, right and bottom.

And so let's for now actually go with top

and set it to zero here,

which is always a good starting point.

And let's say left, zero as well.

Give it a save.

And now it might be gone.

Yeah, it is.

And so that's because now it is right here.

So we set its top position to zero

and so now it's at the very top of the page

because these pixels here,

so the zero pixels, at least for now,

are being counted from the top of the viewport,

so of this visible part of the page here.

So if we change this to bottom, for example,

then it should be here at the bottom of the viewport.

So by default, this element is positioned

in relation to the viewport,

which again is this visible part of the page.

Okay.

So now it stays here,

which is a very weird place for it to be.

But what is important to note here is that in fact,

this element has been completely taken out of the flow

and it's now even hovering over this content.

So it is as if the rest of the content is not even there

and that is becoming even more apparent

as we change, for example, the size of the window.

And let's go back to where we were.

Put it back to top.

And of course we can also move it to some other position.

So it doesn't have to be exactly glued

to the top and the left.

But we can, for example, move it 50 pixels down

and 50 pixels more to the right,

counting here from the left side.

Okay.

So that's the very, very fundamentals

of absolute positioning.

But what is very important to understand is

that these 50 pixels here need to be

in relation to something.

And so, as I just mentioned a minute ago,

by default, these 50 pixels here are in relation

to the viewport,

so the visible part of the page here in the browser.

That's the reason why the element moved down here

to this corner when I set the bottom to zero.

However, that is usually not what we want.

So usually, we want to absolutely position the element

in relation to some other parent element.

And in order to do that,

we need to specifically set the position

of that parent element to relative.

Okay.

So in this case,

we want this element here to be positioned

in the right bottom corner of the page.

So of the page and not of the viewport.

So let's try that.

So let's say...

bottom 50 pixels,

and actually let's keep this here

and just copy it

and then I will comment it out

to keep it here as a reference.

But what we want is 50 pixels from the bottom

and 50 pixels from the right.

So again, it moves it to this place in the viewport,

but we want it down here,

so from the page, right?

And so we need to set position to relative

on the page basically.

And so that is the body element.

So let's do that.

Let's go to body,

which is right here.

and let's set it's position to...

Relative.

Give it a save.

And now as we go down here,

then here it is.

Great.

And let's resize the page a little bit

and now no matter what happens,

the element is always correctly positioned

in the bottom right corner of the body.

Great.

So I hope that made sense.

And of course, it doesn't have to be at the body always.

So we could also position this inside

of any other parent element,

which is not the body.

So let's for example, try here to container.

But in order to do that,

the element actually needs to be inside of the container

because otherwise this is not a parent element

of the button, right?

So let's take this out of here

and put it somewhere else.

And it doesn't really matter where.

All that matters is that it needs to be somewhere

inside of this container,

so this div element with the container class on it.

And I think....actually the place

where it's semantically makes the most sense

is here in the header.

So the header of the article,

so this place here is actually a commonplace

where you would think a Like button makes sense

in a blog post like this, right?

And so let's put it there,

even though visually it's not going to appear there

because again, we are positioning this element absolutely.

So if we give it a save,

then for now nothing will have changed.

It is still right here.

But now let's try to add position relative

to this container here.

So...

Position relative.

And there was a typo somewhere.

And so now it should be somewhere else.

And for now it does look as if it's in the same place,

but if we change this now,

then you'll see that it is here in the top right corner now

of the container element.

So to visualize this, let's inspect the container.

And so here, the blue part is the content.

And so there you see that the Like button is now 50 pixels

from the bottom and from the right of the container.

And again that is

because the container is now the first parent element

that has position set to relative.

All right.

And to make this even more crystal clear,

let's take a look at a graphical explanation of this.

So let's imagine that we have this kind

of yellow element here with the container class

and it has its position set to relative.

Then we have another element which is this one here,

so this orange element

and it has its position set to absolute.

And it also has the top set to 100 pixels

and the left set to 200 pixels.

And so therefore, it will be located exactly 100 pixels

from the top of it's relatively positioned container element

and 200 pixels from the left of it,

again, first relatively positioned container element.

And it's important to mention

that it is the first parent element

that has position set to relative

from which the absolutely positioned element will be placed.

Okay.

And so I hope that with this visualization,

it became even more obvious

how absolute positioning works in CSS.

And let's actually just try another element

as the first relatively positioned container.

So let's do that on the header.

So this button here is inside of this header.

And so we could use this header

as the parent element inside of which we want

to absolutely position this button.

So let's go to a post header.

Place that here.

And now...

Here we go.

So now here it is.

Once again using the dev tools

so we can check out this entire element.

And in fact, it looks like the button is now 50 pixels

from the bottom and from the right

of it's new relatively positioned container.

Okay.

So let's actually remove this one.

So commenting it out and this one as well,

because what we really want is what we did in the beginning.

So we want it to be positioned in relation to the body.

All right.

So I hope this made sense.

And so as a recap of this lecture with absolute positioning,

you can basically put any element that you want

wherever you want it to be on the page,

which of course can be quite helpful.

Now what's important is

that you don't abuse this newfound power.

So don't use this to build complex layouts, for example.

Instead, we use absolute positioning for single elements

like this button or other small things,

just like I will show you in the next video.

But in the real world, we don't use this for example,

to position this menu here,

like here on the top of the page

or to position for example this author image here

anywhere on the page.

For those things, we will actually use special techniques

for building layouts.

So just keep in mind that we always don't simply reach

for absolute positioning,

for example to build layouts.

But all of this will come with practice

and so don't worry too much about it for now.