CSS positioning is arguably the most fundamental skill in web design; it powers layouts and hence forms the foundation of everything inside those layouts. That said, it can be quite tricky to wrap your head around when you are first starting out.
By the time you’ve finished this course, you’ll have a firm grasp of the essential principles you need to drive your layouts. You’ll learn each of the four types of positioning used in CSS, as well as how to work around some of the oddities that can pop up when using them.
But you’ll be learning all this in a different way: visually. You’ll be using Webflow’s visual web design tool (via a free account), so you’ll see the exact effect of applying different CSS in real time, and that instant feedback makes a huge difference in helping all the concepts of CSS positioning fit into place.
So let’s get started on “The Complete Guide to CSS Positioning”. I’ll see you in the first lesson!
Learn CSS: The Complete Guide
We've built a complete guide to help you learn CSS, whether you're just getting started with the basics or you want to explore more advanced CSS.
1.Introduction1 lesson, 01:13
2.CSS Positioning and Layout6 lessons, 32:14
3.Conclusion1 lesson, 02:30
1.1 Welcome to CSS Positioning
When you get started in your web design probably the most fundamental set of skills that you're gonna have to learn is how to create layouts. And underpinning how you create layouts is a strong understanding of how CSS positioning works. CSS positioning as well as working with floating, clearing and things like margins, provide you with an incredibly powerful toolset that would be present with you right throughout your web design career. But as powerful as these things are, they can be equally confusing when you're first trying to master those essentials. But by the time you finish course, you're gonna have a firm grasp of exactly what you need to know to feel comfortable using this tool set in any way that you need to. Over this course, we're gonna do things a little bit differently. Instead of just showing you through lines and lines of code, we're going to be learning visually through a free account at Webflow. You're gonna go through the lessons in this course using a visual interface that will give you real-time feedback as you are applying CSS changes. And the instant feedback is going to help make it much, much clearer exactly how the different types of positioning work. And that's gonna really accelerate how quickly you can master these techniques. So, let's get started on The Complete Guide to CSS Positioning. I'll see you in the first lesson.
2. CSS Positioning and Layout
2.1 Overview: The Four Position Types
Hi, and welcome to the first lesson of the Complete Guide to CSS Positioning. All right, so let's get started. The first thing you need to do is go to webflow.com and sign up for a free account. Then go into your dashboard and you'll see a screen like this. Then you're gonna go and hit this blue button up here, new website. Just give it any name that you want. Seeing as we're working on CSS positioning, we'll just call it CSS Positioning, and hit Create Website. And this is the Webflow interface that you'll be working with throughout the course. Let's have a quick overview of the tools that you're gonna be using as we work through each of the lessons. Now up on the left here, you'll see this plus button and this is what you're gonna use to add elements into your layout. Most often, we're just gonna be using a straight div block here just for the purposes of this course. But feel free to take a look at all the other different types of elements that you can lay out as well. So to create a div, you'll select this. And then you'll see that your div has automatically been placed in here. Now to select it, you just click on it, or click out of it to deselect. And you see there I've selected the body that's highlighted up in the top left. And then with the div selected, you can start creating classes. And this is where we're gonna see the visual interface to the CSS code that we're actually generating behind the scenes. So let's create a class for this div and we're gonna call this one wrapper, and then hit the little check mark. And now down the right side here, you'll see that we've got an interface that represents all the different CSS that we can apply to our wrapper div. And of particular relevance are these four buttons here. These are what we're gonna be focusing on for this course. Here we've got our four different types of positioning, static, relative, absolute and fixed. And then we're also gonna be working with the rest of these tools here. We'll go into that in more detail as we work through everything. Now the way that Webflow works is, as you choose a setting on the right here, it will add the CSS into the style that's being created for the selector that you've nominated up here. So for example, let's change the position to relative. Now, if we preview the code up here. You can see that this CSS has been generated. So we've got wrapper which is the class that we have specified up here. And we've got position relative, which is the position that we've specified down here. So by using this interface, you can see the results of what you're changing in your settings in real time. And then, you can go into the code, and you can have a look at the corresponding CSS. All right, now before we move on to the actual practical steps of this course, let's just go through the basics of what each of these four positioning types down here, what they are and what they do. Okay, you don't have to follow along. You don't actually have to do anything as we just quickly talk about what each of these position types do. This is just to introduce you to the fundamentals so that as we do move through the practical steps, you've got a conceptual foundation to build on top of. So just leave your wrapper div where it is because we're gonna be using it in the next lesson. Relative positioning allows you to position an element relative to whatever its normal position is in the document flow. Absolute positioning allows you take an element out of the normal document flow and position it exactly where you want it. Fixed positioning is almost exactly the same as absolute positioning, but it will hold its position even when you scroll. And static positioning is just the default positioning type. Anything in CSS that doesn't have an explicit position already set for it, is just gonna fall back to static. So the only time that you really need to think about using the static position time is if you have an element with a non-default position type coming from a style that's affecting it and you need to override it. So because static is just the default type, we won't be doing a lesson dedicated just to static because there's really not that much to cover there. Instead, what we will be doing is a lesson going into the full details of each, the relative, fixed, and absolute positioning types. But before we do those lessons, we're gonna cover some other fundamentals of CSS layout. The first is gonna be how to wrangle margins on child elements, and the next is going to be working with floating and clearing, because our four position types are only useful to you if you know how to use them to create the layers that you want. So we're gonna cover these fundamental areas before we get into the details of positioning, so that you have the whole picture. So in the next lesson we're gonna go through is how you can make sure the margins on your child elements behave how you want them to because that can be one of the first issues that you run into when you're learning how to use all of these different positioning methods and layout methods. So I'll see you in the next lesson.