Join Bill Weinman for an in-depth discussion in this video Using relative positioning, part of CSS Positioning Best Practices.
- View Offline
In this lesson, we're going to talk about relative positioning with CSS. Relative positioning is not very good at laying out blocks of text. As you can see here, I have attempted to use relative positioning to create a three column document and it failed miserably. What relative positioning does is it position something on the screen in a different place than where it actually belongs to the document, and yet it lays out the rest of the document as if that object were right where it belonged and had not been positioned.
Let me give you an example here in text. Now take this word BW Whois, and I'm going to move it off to the side, and you'll see that the rest of the document wraps around as if it were right where it belonged. Here we have our document. You'll notice we have the positioning in the CSS, in the style element, just like in the last one. We have our three blocks of text, first, second, and third, and that's what we were seeing on the screen. So I'm going to take this BW Whois word, and I'm going to put a <span> around it.
So that I can apply some style just to that inline piece of text and I'm going to say position: relative and -100 pixels, and that's the left property. I'll go ahead and put in a semicolon. It's not required but I like to put it and save. And now we'll look at it in the document and you'll see that the word BW Whois now has moved all the way out of the content box and yet the rest of this document is wrapping around as if it was right where it belonged.
That hasn't moved at all. All that's moved is those words. So that's what relative positioning does. It moves the place where it displays, while leaving the affective place in the document for other things to wrap around it and interact with it as if it was right where it belonged. The most common use of relative positioning is actually showing up here in our style sheet and it's to create an outer container that qualifies as a containing block for the purpose of positioning other elements and so as we saw in the absolute positioning document, I'll bring that up on the screen here so we can see that.
In our absolute positioning example, we can put position relative in this outer containing block and that made it qualifies a reference point for the absolute positioning. You'll notice there is no top or left property here. So the positioning isn't actually moved. It doesn't actually move that containing box out of the place where it normally would display. Instead, it just exists to make this outer containing box qualify as a containing block for the absolute positioning. So this is the most common use of relative positioning in CSS.
It's not very commonly used for actually moving things around on the screen.
- Understanding style sheets and levels of inheritance
- Learning how to use CSS units of measure in page layout
- Laying out content on a page using absolute, relative, float, and fixed positioning
- Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
- Using templates to improve workflow
- Creating a full working web site, step by step