Relative and Absolute positioning in CSS

  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

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
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

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.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

rjmthezonenet wrote:
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
  • rjmthezonenet
  • Expert
  • Expert
  • User avatar
  • Posts: 526
  • Loc: St. John's, Newfoundland, Canada

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

like so...

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
body{margin:0;padding:0;}
#div1{width:50px;height:50px;background:#c30;}
#div2{width:50px;height:50px;background:#c30;position:relative;top:20px;}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Untitled Document</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style>
  7. body{margin:0;padding:0;}
  8. #div1{width:50px;height:50px;background:#c30;}
  9. #div2{width:50px;height:50px;background:#c30;position:relative;top:20px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id="div1"></div>
  14. <div id="div2"></div>
  15. </body>
  16. </html>
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

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.
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

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

muahahahaha!!!
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

ATNO/TW wrote:
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.


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
  • digitalMedia
  • a.k.a. dM
  • Genius
  • User avatar
  • Posts: 5149
  • Loc: SC-USA

Post 3+ Months Ago

i think he's talking about a centered, or percentage based layout, AGP
  • ATNO/TW
  • Super Moderator
  • Super Moderator
  • User avatar
  • Posts: 23456
  • Loc: Woodbridge VA

Post 3+ Months Ago

correct dM -- that is what I was refereing to exactly.
  • allgoodpeople
  • Proficient
  • Proficient
  • User avatar
  • Posts: 379
  • Loc: here

Post 3+ Months Ago

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 :lol:

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

mark

Post Information

  • Total Posts in this topic: 12 posts
  • Users browsing this forum: No registered users and 62 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.