positioning in css

[shaneR]

Could someone please describe the differences between RELATIVE and ABSOLUTE when positioning using css and maybe how to use the two together. Thanks

[S@m]

Hi!I'm not an expert, but hopefully this should help clear a few things up.Absolute:This is just what it sounds like. It's absolute position on the screen. No matter what else happens on the screen, it will always sit at the same x,y coordinates that you set.So, say I have a div called "name" with styles:

#name {position:absolute;top:30px;left:30px;}

Whatever is in that name div will always be at 30px from the top and 30px from the left. It's position is locked in, and nothing can change it. Even if I have content that goes over it. You can also use z-index with this to place this div on a higher level. That way it will always be on top of everything else. Handy for a logo or something.Relative:This will place elements based on where other things are. So If I have my name div with a relative position, it will be 30px from the top of the element above it, and 30px from the element on the left of it. So, if I move the elements to the top and left over, this will also move my name div. This is called a "fluid" layout.If I tired that to move it with absolute positioning, the name div would not move, the content would overlap it or something else funky would happen.You can also use z-index with relative positioning.IE6 has a peek-a-boo bug. If you float elements, you will need to give them a relative position. Otherwise they may not display. What a cool feature! :)Hope this helps!

[jlhaslip]

This will place elements based on where other things are.

I look at it as absolute is relative to the Display Screen and relative is absolutely within its "containing block". (div, usually)

[jesh]

Another thing to consider is that absolute positioning pulls the element out of its container, similar to the way float acts. Relative positioning, on the other hand, keeps the element in the container.

[croatiankid]

relative is relative to where the element would normally appear, if positioning were not used. for example if you give something position:relative;left:5px;, it will appear 5 px to the right of where it would normally appear

[sridhar]

relative is relative to where the element would normally appear, if positioning were not used. for example if you give something position:relative;left:5px;, it will appear 5 px to the right of where it would normally appear

croatiankid, Can u give the full details about the relative position. i have a huge form, it has the vertical scrolling bar also. after the scrolling i need the div. when i click the link, div will visible near by the link. (example like a calender window popup).Thank you