OK I give up. Someone please explain absolute and relative positioning to me in a way that an oak nightstand could easily understand.

March 3, 2012 10:36 AM

OK I give up. Someone please explain absolute and relative positioning to me in a way that an oak nightstand could easily understand.

Im theoretically getting this, but it's just not catching in the old noodle.

posted by Senor Cardgage to Computers & Internet (5 answers total)

I kind of like the way About.com puts it, astonishingly enough.

Absolute positioning removes the element from the flow of the document entirely, whereas relative positioning just shifts it around where it would normally have displayed, while leaving it in the normal flow.

That is, if I'm understanding it correctly. I haven't written fancy CSS in a long time.

You might also really like this tutorial / demonstration.
posted by SemiSophos at 10:55 AM on March 3, 2012 [1 favorite]

It's a little confusing sometimes that *all* coordinate systems are relative. I mean, if someone tells you 25 degrees north latitude, 30 degrees west longitude, 0m above sea level, that's still relative to some arbitrary line on a map! But the difference becomes useful like so:
* absolute positions are all offsets from some common, agreed point that practically never moves. The top left of your monitor, for example, can be called 0,0 so that you can absolutely give the position of anything on the screen, regardless of what else might be happening on that screen.
* relative positions are all offsets from appropriate local reference points. In this case, you might say that 0,0 is the upper left corner of your parent window. So as you move that window around, all the things positioned "relative" to it move, too.
posted by introp at 10:58 AM on March 3, 2012 [2 favorites]

Absolute positioning in CSS means this:

NO MATTER WHAT other HTML objects are near me (DIV tag, P Tag, picture, movie, letter, etc) PUT ME THERE.

Relative positioning in CSS means

please look at the object adjacent to me, and on the side (top, left, bottom or right) specified and move me X pixels, pica or percentage AWAY from object in the direction I specify.
posted by roboton666 at 11:01 AM on March 3, 2012 [3 favorites]

Note: From the tags, the OP is specifically asking about CSS.

I like this explanation.
posted by DarlingBri at 11:03 AM on March 3, 2012

Best answer: Elements with relative positioning are within the flow of the page. They take up space and sit relative to other elements. These are normally positioned with a combination of the margin, padding, and float attributes.

Absolutely positioned elements exist outside the normal flow of the page. They don't push other objects out of their way. You typically use top, right, bottom and left to position these. Crucially, the absolute element is positioned relative to it's last ancestor with an explicit position property, whether that be relative or absolute.

Example without HTML tags because I can't remember how to do it on mefi:
We have div id=A and div id=B. Both of these contain img class=kitten.

We have CSS:

div
{
height: 100px;
width: 100px;
background: red;
}

#A
{
position:relative;
}

#B
{
}

img.pony
{
position:absolute;
top: 20px;
}

Now, what happens? The image inside #A will sit 20px below the top of the box. #A was the last ancestor element with positioning specified. But the one inside #B will actually sit 20px from the top of the page. Why? Because that's the last element with positioning specified (by the browser's stylesheet, if you haven't done it explicitly).

Here, I made a little fiddle to demonstrate. It's got an extra div to keep it tidy, but it should be a decent explanation of what I mean. Plus, kittens!
posted by Magnakai at 12:01 PM on March 3, 2012 [1 favorite]