CSS: Relative versus absolute versus static

carl67lp

Supreme [H]ardness
Joined
Oct 17, 2001
Messages
4,554
I'm getting a headache trying to wrap my brain around this.

Right now my project involves what I expect to be a combination of absolutely and relatively positioned containers, but I can't figure out the distinction. I've just read through several Web sites on the differences, but they still don't make sense.

Can someone enlighten me? Perhaps the best way would be to show a demo of some sort, where I can visually see the differences between the two types of positioning.
 
relative: offsets the box's x,y coordinates relative to it's default position. relative positioned boxes follow normal "flow" meaning that they will be affected by the position of other boxes around them inside the same container. Relative position is the "default" position of boxes if a position type is not defined. Though I find IE likes to have it specifically defined in most cases.

absolute: places the box in the specified x,y coordinates you define. absolutley positioned boxes are still bound by their container boxes. they also do not follow normal "flow", meaning they will not be affected by or affect other boxes around them inside the same container.

fixed: similar to relative except the box will stay in the same position all the time even if you scroll the window. (i don't this works in IE)
 
maw, thanks for the words of wisdom, but unfortunately it's all still as clear as mud to me. And from what I understand, "absolute" positioning should be called "relative," since absolutely positioned objects are placed relative to their containing block, while relatively positioned objects are placed relative to their normal flow.

Does anyone have a nice tutorial on the subject?
 
Well, maybe this can help you understand it better.

http://www.blisspc.com/files/divpos.html

The absolutely positioned div is in red, in the smallest font size.
The relatively positioned div is in blue, in the middle sized fonts.
A third, default, div is also included so it's clearer, in black letters and bigger font size.

Notice how on the code, the first div used is the content one, with the 2 paragraphs. Then the absolutely positioned div is used, with 1 paragraph, and the last one called is the relative one.

Now, the first content div is displayed normally, at the start of the page. But the absolute div is also on the top of the page, because I positioned it at "top: 0; left: 0;" in the CSS. It doesn't take into consideration that there are other things taking up the space, it just overlaps with whatever is under it. Now, the last div called, the relative one, is also set on the CSS as "top: 0; left: 0;" but isn't reacting the same way as the absolute one. Why? Because that position (0, 0) is relative to whatever is before it. Relative positioned elements do not overlap other elements like the absolute divs do. If I had set the position to "top: 50px; left: 80px;", then there would be a space of 50px between the content div, and the relative div, and it would be indented 80px from the left.

Basically, absolute divs take up no space. They float wherever you want them to.

Hope this helps some... Not sure if it's clear.

EDIT: I set both the relative and absolute divs to 50% width btw, so that's why they're only taking up half the screen. And just in case, the css is at www.blisspc.com/files/style.css .
 
Originally posted by Anarchonixx
Well, maybe this can help you understand it better.

http://www.blisspc.com/files/divpos.html

Unfortunately, it can't be found.

But, I think I might have figured it all out. I've got a working layout now with absolutely positioned DIVs.

Tell me, is it bad practice to have a bunch of DIVs positioned absolutely?
 
Originally posted by carl67lp

Tell me, is it bad practice to have a bunch of DIVs positioned absolutely?

no, not particularly. it all depends on what you are trying to accomplish. the more you do CSS layouts, the more you will be able to determine which type of positioning works best for your situation. you often end up using a mixture of both
 
Back
Top