FREELessons: 32Length: 5 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

4.5 The Difference Between Relative and Absolute Positioning

[SOUND] Today we're gonna take a look at something that confuses a lot of beginning, HTML and CSS designers. And it's called positioning. More specifically though, the difference between what we call absolute positioning and relative positioning. Let's take a look. I am going to, browse to my index.html file. And I wanna create a box. So we can do that by using a simple div. And we'll give this a class of box. Now I'm gonna leave it empty, because we're only gonna use style.css to style this box. First, we've referenced a class by doing .box. And now I'm going to set a width and a height, of 200 pixels. And in fact, why don't we increase this to 400? And I'm also going to set the margin, to auto to center it on the page. And finally, set a background color of red. Now, if I load this in the browser, this is more or less what you would expect, right? So let's take a look at positioning. What if we wanted to move this box, to the left? All right. I'll show you how. First, we'll set what we call a positioning context, position is relative. And when you set this, you now have the ability to specify top, left, right, and bottom values. So watch what happens if I set top, of 200 pixels. Reload, and notice it pushed it down, and this is something that confuses a lot of people. Why is it going down when we set it to top. And when you specify top, you're not saying go to the top 200 pixels. What you're saying is from the top, push it 200 pixels. So, if you can imagine. Little guys on each side. And what you're saying here is, get the guys on the top and they're gonna push this box 200 pixels. And the only direction they could push the box is down. So if you said right, we're gonna get the little guys on the right, and they're gonna push it to the left 200 pixels. If I load. Now it's been pushed to the left. So why don't we remove the margin, reload the page, and now you see that's being pushed off the page because of this right value. So I will remove that. Next you notice this little bit of spacing. Where is that coming from? Remember that's coming from the browser's default style sheet. We can remove this by setting body, margin, 0. And now that little bit of spacing has been removed. Now if we want to move our box to the left. How bout 400 pixels? Now it's been adjusted. What if we wanna move it down as well? But remember, we don't do bottom, because that would push it up, cuz the guys are on the bottom, and they're gonna push up as you can see right there. So instead, we wanna specify top. And we'll push it down 200 pixels like so. So you might be thinking okay well that's easy enough to understand, but what about absolute positioning? That's a different option. When we specify absolute, now see how this changes. Reload the page and it's identical. But, it's only identical because we are specifying it in terms of the browser window. It's gonna be very different, though, if it's within a different context. So for example, why don't we cut this out. And once again, I'm gonna specify margin of auto. If we add a positioning context again, and let's test it out. Left 20, top 30, it moves it right there, but if I change this absolute, it's gonna be different now. Reload. What? Why did that happen? That makes no sense. Well, it actually does. We are now saying, absolutely position this within its parent. So, I know this is a little confusing. Absolutely position this within its nearest parent that is positioned. In this case, its nearest positioned parent is the body element. So now, it's going to be in relation to this body. And now we're saying, from its parent, we're gonna specify left of 20 pixels, from its top, and top of 30. So let's see a better example. I'm gonna wrap this within a div. With the class of wrap, and I will simply paste this in. Next I'm going to style the wrapper, we'll do it right here. Wrap, width of 800 pixels, margin of auto to center it on the page, and if I leave it like that, maybe we'll apply a background just for the example. And we'll also apply a height because there's nothing within this div. Reload. Notice that it's not adjusting this box. And that might be confusing. Well, now the parent is wrap so shouldn't it be placed absolutely in relation to this box. Not yet, because even though we have wrap it is not positioned. Watch what happens though when we apply a positioning content. Of relative. You're gonna see this box move, refresh, now it's changed. Because now, we are setting the box, positioned absolutely in relation to its nearest parent, which is the wrap. So now it's limited to the width and the boundaries of the wrap. Hopefully that makes sense. As I'm explaining it I can even imagine it being confusing, and it probably is. But just stick with it and work with me through these examples. Because there's a positioning context, left 20 pixels is no longer 20 pixels from the browser window, but 20 pixels from the left boundary of that parent right here. If I set it to 0, it's gonna be right up against that edge. If we remove position relative, the nearest parent is the body, or the browser window, in which case it's positioned all the way over here. That's an important distinction to make. So when would you use absolute positioning? And you'd do it for little things like this. Let's say we have a width of 80 or 70. Reload the page. And you wanna have, maybe a little box over the top left edge. So you'll position this negative 35 pixels, like that. And now you can add maybe a little ribbon right there. If you just simply want to position something special, whether it's a ribbon or. A call-out. Something that exceeds the boundaries of your container. Because that makes things look nicer. Everything shouldn't have to be bound by very straight lines, this can add a nice little effect. But that's not the ony way. There are many, many ways that you would use absolute positioning, and we're gonna cover some more of those. As we continue on, in this course. So what you need to take away from this is, a relative positioning, gives us the ability to specify top, left, bottom and right values. So notice the wrap if I set top 50, this is going to be pushed down. As soon as I get rid of my positioning context, top will cease to take effect. As you can see right there. So if you were trying to use left and it doesn't seem to be working, ask yourself, have I positioned this element? Now when you absolutely position it, rather than using values like left 20 pixel, rather than that being relative to the current position, of the element. It's then relative to the positioning of the parent. So here box left 35 means, go to the left 35 pixels, from the left edge of the wrap container. Little confusing, stick with it, have a lot of fun with it. Try all the different ways that you can position an element, both relatively and absolutely, and see if you can wrap your mind around this. And that's your big assignment for the rest of today.

Back to the top