2.4 Relative Position

Hey, welcome back to The Complete Guide to CSS Positioning. In this lesson, we're gonna dig into the relative position type. We're gonna look at what are these and how it works. I have made a couple of little adjustments to add divs here since the last lesson so each one is set back to 50% width and scented, there's no floats and no clearance on each one. They all have high set to order. So if you've still got a high in there, just click inside delete the numbers and press enter. And they also have no margins or padding. So if you need to do that just hit pause and adjust your divs now. All right, so when you've done that, let's move on to explaining how relative positioning works. Now you can probably guess from the name that when you set an element to relative position you're going to be able to move it relative to something. The question is, relative to what? Well, relative positioning allows you to move an element relative to its normal position. So let me show you. Let's just select our second child here, the purple one. And we're gonna set its position to relative. So down here, with the position setting, we're gonna go to the second one here, relative. So we'll set that on. And now you can see it's given us a bunch of new controls that we didn't have access to before. This is your relative positioning. So you've got your top position, left, right, and bottom. So let's start by changing the top position and see what happens. All right, so as we increase the top position, relative position, you can see we're able to offset our element vertically. And you can also do the same thing with the horizontal position, so here I'm changing the left position. Now I'm like floating an item like we looked at in the last lesson when you change an element to a relative position and you start offsetting it horizontally or vertically. You are not removing it from a normal document flow. So that means it's still going to be affected by the elements around it in the same way as it would normally. So let me show you what I mean here. If I select the first child, and then I give the first child a bottom margin you can see that it pushes down a second element just as if it had moved at all. So you can basically imagine that even though you've offset this relative element, it still has left something like a ghost of its normal self where it would be. Had you not changed that top and left position that we just did. All right, so let's just undo that margin change for now because I wanna how you how the margins on the actual relative positioned element still work as they would normally choose. So if we change the margin here, you can see that that takes effect as well as the top offset that we're using. With our relative positioning. So as I mentioned, just imagine that the element that you have started relatively positioning has left a ghost of itself here. So everything else in your code is going to affect your element in the same way that it would if it just had static positioning. But you have the ability to add into the mix that offset from your relative positioning. The most common use that you're actually going to have of relative positioning is to enable you to position other elements that are nested inside your relatively positioned element. And in most cases what I'm referring to would be an absolutely positioned element nested inside a relatively position element. And I'll explain more about that in the next lesson where we'll dig into how to use position absolute. I'll see you there.