Relative and Absolute positioning in CSS

I'm a bit confused about the values for positioning with CSS.

I understand absolute positioning pretty well. It places the elements relative to the browser window itself. Relative positioning, however, is confusing to me. How do you know what element in the page element "A" is being positioned relative to?

Specifically, The behavior of my page with different elements in it is confusing to me. In my original page at http://www.nriyounglife.org , the top header panel does not have the position specified. The left menu panel is set to absolute positioning. Everything is where i want it.

In my second page ( http://www.nriyounglife.org/menutest.htm ) I added a DHTML menu whose position is absolute by default. When this is inserted into the page, it pushes the header box to the top of the page, and the only way to bring it back to the original position is to set it's position to absolute with the accomplanying top value. This, however, brings the main area up higher on the page. It seems like everytime i set something to position: absolute, something else on the page moves in relation.

Now, I could just get around all this by making all boxes on the page absolutely positoned and setting their positions as desired. Is there a problem with using absolute positioning for all box elements?

Mark

The element would be relative to the box level element it is immediately inside. If you had two boxes: <div id="1"> and <div id="2"> and id=1 was 10px down and right from the top left of the browser, and id=2 was 10px down and right from the top left of it's container, div=1, then div=2 would be 20px down and right from the top left of the browser window.

rjm.......t, thanks for the info! that does make sense, the way you explain it.

ok, so is relative positioning only used for nested elements? What about <div> elements that are not inside each other?

mark

yes, relative is for nesting (sort of). what you need to do is ask yourself what your positioning and why? most box level elements should not be positioned... let the browser place them according to natural flow. save positioning for items like navbars.

maybe you said this, and I just didn't read it right....

relative means relative to its position in the normal render flow.

If I had 2 DIV's (not nested), each 50px tall, in the normal render flow the first DIV's left/top coord would be 0,0. The second would be at coord 0,50.

If I added {position:relative;top:20px;} to DIV 2's definition, it would render at coord 0,70.

position:absolute; and float:*; will take an object out of the noraml render flow.

like so...

The thing that's difficult with absolute positioning that also needs to be considered is browser resolution. What might look perfecly postitioned at 1024x768 on a 17 inch monitor may look like crap on other resolutions. If you feel absolute positioning is essential to the layout be sure to test it in other resolutions.

or be like me and support the left aligned fixed width layout.

muahahahaha!!!

why would resolutions effect the page layout? 10px is 10px, regardless of resolution. screen resolution shouldn't move things around iwouldn't think.

the biggest issue with resolution is screen real estate. what used to look like a nice open space suddenly looks cramped on a smaller resolution.

mark

i think he's talking about a centered, or percentage based layout, AGP

correct dM -- that is what I was refereing to exactly.

I got my issue fixed. i moved the DHTML menu from the beginning of the body tag and placed it within the #nav_menu div tag. this seems to have taken it out of the flow of the page and caused it to stop interacting with other elements on the page. i then was able to figure out how to change the menu itself from absolute to relative positioning. so, things are doing what i expected again

thanks all for the help in getting a little bit better handle on CSS positioning

mark