Video Summary

Alright, let’s start playing around with the position-fixed value. So we’re going to come here we were building off of the static, we were the static doesn’t do anything. 

But what we want to do is we want to make this fix. So we’re gonna come over here and we’re going to try and make this heading fixed. So we have fixed and it moved a little bit, but it didn’t really do anything quite yet. So what we want to do is we want to use the side positioning to place it right where we want to. So let’s come down here and let’s try bottom and let’s make this 10 pixels. 

So basically now what we did is we push this to the bottom of the page 10 pixels above. All right, now what happens if we do if we go, let’s say, right and let’s do 40 pixels. 

So now we place this over here. 40 pixels by 10 pixels. That’s where we have it placed. Now, where this becomes really relevant is let’s go here and let’s just do a paragraph tag and we’re just going to type in a bunch of nonsense because this is more for the example and we’re just gonna copy and paste this so we have a large to make this a little bit easier, we’re going to target our PS and we’re gonna make this font size fairly large. And we’re going to make this let’s do 50 pixels. And what I’m gonna do too, is I’m just gonna come in here and I’m gonna show make some random spaces like their words, so it looks a little bit easier.

Alright, so now that we have somewhat of a paragraph, now what we’re going to do is run a copy of this and we’re just going to paste it so we have a large page. And what we’re going to do let’s make this a really like let’s do color. We’ll just do the color blue so we can actually see a difference. Alright, so as we scroll, as you can see, this headline, or h1 Tag stays in the same place the entire time. 

Alright, so that’s like the power of having a fixed element. And you might want to create your own or maybe you want to utilize a feature where like maybe you have a chatbot that you want to use and you have the icon right down here. But let’s say the rent the positioning that they have isn’t where you want it, maybe you instead of having it right, maybe you want it a little bit over maybe it’s 70 pixels, right? So this is how we’re going to be able to move this around and really make it where we want it. 

That is the power of using the fixed value for the position. And knowing the be able to use the bottom right left top really allows you to place everything right where you want to and this is where no matter where you’re at on the site or on the page, as long as you’re as long as you have this element that you’re targeting with this fixed position, CSS declaration, this is what you will see. So that being said, let’s hop over and learn about the sticky position. and how and when that becomes relevant for you when you’re building your websites.