Absolute positioning not working?
I am giving a div an absolute position, but it is being offset by the parent div (also absolute) offsets.
I am very confused by this behaviour. It is happening in both Firefox (2+) and IE (6+).
I have a div that I need to use absolute positioning for so I can show a tool tip near the mouse location. I have no problem managing that. My problem is that when I position my div at the absolute location of the mouse, it is being offset by the containing div's offset. I have reduced the problem to this example.
I have a div (id = x) that is set to position: absolute. Top and left are specified as 0px. But, the div appears at the top left corner of its containing div, not the top left of the document where it should be (unless my understading is off).
The containing div has id="main". It must also be positioned with absolute.
This nesting results in my 'x' div being drawn at the wrong location. Full code is below. Can anyone explain this or lead me to a fix? I would be very grafeul!
## Example of absolute div placed w/ offset of parent div ##
<title>Absolute Layout Bug?</title>
border: 1px solid #0f0;
border: 1px solid #00f;
<div id="x">I should be in the top left corner of the page! Right?!?</div>