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.