Positioning elements inside a <div>

[Nohana]

I ran into a small problem while designing a small js/css based game, it's over properly positioning elements inside a <div>. Which value (relative/absolute) should I use when I want to manually specify the coordinates of each element inside a <div>? Actually I'm confused about the difference between both values. What I have is the following, a <div> with absolute postion and another one without any positioning properties assigned to it. In my first <div>, elements with top/left/right/bottom properities and absolute positioning seem to stick well to the div they're in. On the other hand, in my second <div> different elements with the same properties are placed relative to my browser, not the <div> (FF only). In IE however, the elements stay inside the <div> as I want. I found out by testing that switching from 'absolute' to 'relative' solves the problem in the second <div>. Now my question, is there any major drawbacks from using 'relative' or 'absolute' position values? Because I'm using only FF1.5, IE6 and Opera9, I can't make sure of this, but wouldn't one of these two values end up screwing how elements should be displayed on a slightly older/newer browser? Should I favor one of one value over the other?Currently I have many classes that have 'absolute' positioning. Should I change them to 'relative' since they're all inside a <div> anyway?[edit]Oh and most importantly, how does an element with relative/absolute position behaves inside a <div> with relative, absolute and one with no position property attributed at all?Thanks in advance for any answers. This is driving me more and more confused, and I need to get the game running before the end of this week.

[Ingolme]

OK, it works like this:If a <div> tag with an absolute position is placed within a <div> tag with a relative position its width, height, top, right, bottom and left properties will be relative to the parent <div>Example:<div style="position: relative; left: 50px;"><div style="position: absolute; left: 50px; top: 50px;">This div is located 100 pixels from the left of the document, and 50 pixels from the left of its parent.It is located 50 pixels from the top of both its parent and the page.</div></div>