Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
Lessons:8Length:36 minutes
  • Overview
  • Transcript

2.6 Fixed Position

The last position type we’ll be looking at is fixed, which is a lot like absolute positioning but with one key difference. In this lesson, you’ll learn what that difference is and how fixed positioning works.

2.6 Fixed Position

Hi, and welcome to the last lesson in The Complete Guide to CSS Positioning. In this lesson, we're going to be looking at the fixed position type. And the fixed position type works almost exactly the same as absolute positioning. All right, so let's see how it works. Now since the last lesson, I've reset all of the settings on each of these elements. They're all just back to position auto and they've had any topple left right bottom values all removed and that includes the wrapper that's also been set back to just position auto or position static, more correctly. So now let's select our second child, the purple one, and let's set its position to fixed. So just like we saw before with absolute positioning, that pulls the element out of the regular document flow. Now, let's give it a top and a left position. We're going to put it right up in the top left corner. All right so so far, still exactly like absolute positioning. And the difference comes when you start to scroll. So it's gonna to give our element some height to make sure that it doesn't collapse down to nothing, now that it's out of its normal position. So we'll give it a height of let's say 100 pixels and now to give us something to scroll with, we'll select our wrapper, and we'll give it a high of a thousand pixels. And now when we scroll, keep an eye on our second child here. You can see that its position is fixed. So that's how fixed positioning works. Everything is the same as with absolute positioning, except for the fact that that position remains fixed, even when you scroll the rest of the design. So that now covers all of the four positioning types. So we've covered fixed, absolute, relative, and then you've also just got static, which is the default. Now that wraps up the last lesson. I hope you'll join me in the final video of this course. We're just going to quickly summarize everything that you've learned. And then I'll give you some tips on what you can do next to continue building on your CSS positioning knowledge and your application of that knowledge into CSS layouts. I'll see you in the final video.

Back to the top