Tip:
Highlight text to annotate it
X
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 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.