-: 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 gonna 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 its 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 gonna 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 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 markup 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.
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 gonna 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 heart 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 it here using button.
Let's first give it some visual styles.
Adding some padding as well.
And we can also use that,
a trick of defining the cursor property
as I also showed you in the challenge,
and set it to pointer,
so that we actually get that hand, right?
And so now it looks a little bit nicer.
And you 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 safe 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,
set it to zero here, which is always a good starting point.
And let's say left zero as well,
give it a safe 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 these zero pixels,
at least for now,
are being counted from the top of the view port.
So if 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 view port.
So by default, this element is positioned
in relation to the view port,
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 to 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 view port.
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 dead 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 view port.
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 view port,
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 its position to relative,
give it a safe.
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 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 the 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 diff element with the container class on it.
And I think actually the place where it semantically
makes the most sense is here in the header.
So the header of the article.
So this place here is actually a common place,
where you would think a like button makes sense
in a block 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 safe,
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 is 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 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 its relatively positioned container element
and 200 pixels from the left of its again,
first relatively positioned container element.
And it's important to mention that it is
the first parent element that has positioned 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 post header, place that here.
and now, here we go.
So now here it is.
Once again using the diff 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 its 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 wanted 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.