Welcome back to Web does simplified In today's video, I'm going to be teaching you everything you need to know about CSS positioning.

So by the time that this video is over, you're gonna be positioning elements like a CSS God.

Let's get started now to demonstrate all five of the difference, Siya says.

Properties for position.

I have a simple example set up.

We have a parent element as well as three child's inside of that parent element, and right now there's absolutely no position.

Style is being applied to them on Lee these default styles for coloring it.

And if we come in here and we want to inspect one of these elements to figure out how the position is being implied by default, we could go to the computer tab.

We can search for position, and if we see right here, our position property is set to static by default, and static is the default position that all of your HTML elements will have when they enter onto the page.

And essentially all static physician does is it says, that it should follow the other elements in the document flow.

So whatever comes first in our HTML.

For example, child number one will be above child number two and so on.

So static position.

It is just like how your HTML works when you type it out, and it's what you're most used to.

The next day s s position that we want to cover is relative position, and this works almost exactly the same as static positioning.

So if we go in here and we want to change our green child here, child number one to be positioned relative and we saved that a human is absolutely nothing over here has changed.

And that's because relative position acts exactly like static physician.

But it allows you to do for specific things.

They're static.

Positioning does not.

And that is that you can change the top left, right and bottom of this element.

So let me just show you an example of that.

We could come in here and we can change the left, for example, to 10 pixels.

If we say that, you see, the element moves itself over 10 pixels.

It even overflows its parent by 10 pixels on the right side.

And that's because relative allows you to actually change the position of the element relative to where it normally would be in the document flow if it was statically positioned.

So as you can see normally, this one would take up this space here inside of the parent.

But because of the left 10 it's moved over 10 pixels.

And for example, if we put top here to be 10 and save it, you see that it actually overflows.

The element's below it.

Because relative position, when you apply a top left right in bottom, it actually takes that element out of the document float and moves it down or left or right or up those 10 pixels that you specified.

And the reason that this element two and three are not actually being pushed down when this top element is being pushed down is because, like I said, it was removed from the document afloat so it no longer works just like a statically position element.

If you can see here that the position where one normally would be is taken up and that is reserved for where one is and the actual element one is just moved by these top left right and bottom elements that we apply to it.

In general, you're almost never going to be using top left, right in bottom, on a position relative element.

Because all that does is move your element out of the document foil and it becomes really difficult to style things around it since, as you can see, our element to is now no longer in line with one.

So we would have to also positionally relative number two exactly the same.

And we got to do the exact same thing with number three and so on.

And it gets really confusing when you start using that.

So in general position, relative is not actually used for using top left, right in bottom.

The next element that we want to talk about for a position is absolute.

And that one most definitely gets used with top left, right and bottom.

So let's put an absolute on here, remove our top, save everything and you can see that already thinks have changed drastically from before when we had no position, this is with no position and then position Absolute.

And as you can see, the document actually completely ignores this one element right here.

It just pretends like it was completely deleted.

And, for example, if we go into our index HTML here and we delete this one element and save it, all of the rest of our elements work exactly the same as before.

We added Back in, you see nothing else moves except about one element.

And that's because position absolute completely removes the element from the document float, and everything else renders as if that absolute element didn't even exist at all.

And that is crucially important.

This makes Christian absolute really useful, for you want to stick something in a specific position, but you don't want anything else to move around it.

And as I mentioned, Position Absolute allows you to do top left, right and bottom to it, and you'll notice if we put a top on here of, let's just say, 10 pixels.

Something really weird is gonna happen if we say that.

You see that this element is actually 10 pixels from the very top of our screen.

If we set this to zero and save, you can really see that.

It's just that the very top of the screen, But why is that?

Shouldn't be down here zero pixels from itself, and that is incorrect because that's what relative position does.

Absolute position, absolutely positions an element inside of some parent container that it can reference.

So you'd think it would reference this parent.

But this parent is positioned static, which means it can't have anything else positioned absolutely or relatively to it.

In order to change an element so that you can position something absolutely are relatively to it.

You need to use one of the other positioning elements of either relative absolute, sticky or fixed in order to make an element position absolutely inside of it.

So if we change parent here to position relative, which this is the most common use case for position relative you'll see now are absolute position element is relative to the position relative parent, and this is where relative is really useful.

It's when you want to absolutely position something inside of it.

You need to make sure that element has positioned relative.

Otherwise, that element will just fall back to the next relatively position parent or all the way back to the HTML element itself.

So this is where relative and absolute play really nicely together.

So just to reiterate the positions we've gone over already static is the default relative is exactly the same ecstatic, but you can relatively position it to itself.

Using top left, bottom and right and then absolute is just like relative in the fact that you can position it relative using top left writing bottom.

But it completely removed it from the document flow so that all the other elements ignore it completely.

And relative and absolute play together nicely because any element that is relatively positioned can have absolutely position elements inside of it.

That'll be relative to that relative position element, and that works for every position, not just relative.

We could change this here to be absolute as well, and you can see still that one element is relative to the parent because the parent has some other position than static, and that's really important.

Anytime you have a position other than static, absolute elements will use that as its parent that it's absolutely positioned inside of.

So let's remove that because we don't actually want this.

We keep it is relative and now we can move on to the next type of positioning, which is fixed positioning, which is very similar to absolute positioning but there's some caveats regarding it.

So what's changed this to be positioned fixed here and save it and you see immediately it completely ignores this relative position parent and moves all the way to the top.

And that's because fixed position elements are always fixed, positioned based on the entire HTML element.

It has nothing to do with parents.

Also, something really unique about fixed position elements is they stay in the same place when you stroll.

So let's make our page very large.

We're gonna change the hate here to 200 view heights, so it'll be able to scroll.

And if we say that we can scroll down, you see that this one element still sticks to the very top of our page because it's got top of zero.

For example, if we put the right to zero as well and say that you can see it sticks now to the top, right, no matter how far we scroll.

But absolute does not work that way.

If we change this tow absolute, you can see it's in the top right here.

But if we scroll, you can see it stays there.

It doesn't actually move.

When your scroll.

And that's the big difference between fixed and absolute fixed moves with the page as your scroll and is always in the same exact position on the page.

And also, it is, isn't itself based on the entire HTML page, and not just the parent that has the correct positioning relative, absolute et cetera on it.

And those are the real big differences between absolute and fixed and now the last position that we need to cover his position sticky.

And I'm not going to go super in depth and position sicky because I have an entire video covering it.

So if you want to check that out, make sure you check the description and the cards for this video to find that sticky position Video.

But essentially sticky position is a combination of both relative position and fixed position in tow one.

So let's go down here to our child.

One.

We're gonna make this sticky position.

We'll get rid of the right.

We'll just have top here.

And if we say that you'll see it looks just normal, just like it was relatively positioned.

But as we scroll down as soon as this element hits the top of our page.

Since we have our top set to zero, it'll become fixed position now.

And, as you can see as we scroll, it stays fixed to the top of our page with that top of zero.

And that's really with power of sticky.

Position is by default it's relative, but as soon as it's scrolls outside of the page, it becomes fixed position and that's it.

Position and CSS is really that easy.

You have the default static position.

You have the relative position, which works just like static, but you can move it based on itself absolute, which works just like relative.

But it's moved based on its parent element, that is, using position relative absolute.

Stick your fixed and we also have sticky position works works just like fixed and relative and lastly, fixed position, which allows you to put an element on the page, and it'll stay there no matter where the user moves to with the scroll wheel.

So I really hope you guys enjoyed this video and have a little bit more understanding of the different positions inside of CSS.

If you enjoyed the video, make sure to subscribe and leave a comment down below, letting me know what other videos you want me to make in the future.

Thank you very much for watching and have a good day.