CSS Position Property

CSS positioning


 We will see five different CSS properties for position

We have a parent element as well as three child's inside of that parent element

and right now there's absolutely no position styles being applied to them only 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 applied by

Default we can go to the computed 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 visitors Union does is this 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 positioning is just like how your HTML works when you type it out and it's what you're most used to

The next CSS 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 save that and you'll notice absolutely nothing over here has changed and that's because relative position acts exactly like static positioning

But it allows you to do four specific things that 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 can come in here and we can change the left for example

to 10 pixels if we save 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 a little 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 elements below it because relative position when you apply top left

and bottom it actually takes that element out of the document flow and

moves it down or left or right or up those 10 pixels that you

Specified and the reason that this element 2 & 3 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 flow

So it no longer works just like a statically positioned 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 1 is just moved by these top left right and bottom

Elements that we applied to it in general

You're almost never going to be using top left right and bottom on a position:relative

element because all that does is move your element out of the document flow and it becomes really

difficult to style things around it since as you can see our element 2 is now no longer in line with 1 so we would

have to also

position the

relative number 2 exactly the same and then we'd have to do the exact same thing with number 3 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 and bottom

The next element that we want to talk about for 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 things 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 add it back in you see nothing else moves except for that one element and that's because position absolute

Completely removes the element from the document flow and everything else renders as if that absolute element didn't even exist at all

And that is a crucially important this makes position absolute really useful for when 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 save that you see that this element is actually 10 pixels from the very top of our screen

If we set this to 0 and save you can really see that it's just the very top of the screen

But why is that shouldn't it 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 would 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 or 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 our 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 as static

but you can relatively position it to its self 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 right and bottom

but it completely removes 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

We'll 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 can keep it as 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 let's change this to be position 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 scroll

So let's make our page very large. We're going to change this

I hate here to 200 view heights

So it'll be able to scroll and if we save 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 to 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 you scroll and that's the big difference between fixed and absolute

fixed moves with the page as you scroll and is always in the same exact position on the page and

also

It positioned itself based on the entire HTML page and not just the parent that has the correct positioning

Relative absolute etc on it

And those are the real big differences between absolute and fixed

and now the last position that we need to cover is

Position sticky and I'm not going to go super in-depth in position sticky 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 into one

So let's go down here to our child one. We're gonna make this sticky position

I'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 Scrolls outside of the page

It becomes fixed position and that's it position in 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 sticky are 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
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