a question about offsetParent?

[wyx2000]

I use offsetParent to locate my div tag, but I find in the following case, the div position on the screen the same, but they have different offsetParent.
case 1:
....
<table>
<tr><td>...</td></tr>
<tr><td>
<div id="test"></div>
</td></tr>
</table>
....

case 2:

....
<table>
<tr><td>...</td></tr>
<tr><td>
<div id="test" style="position:relative;top:0;left:0;"></div>
</td></tr></table>
....

it seems to me when you use relative psotion, and you set left and top to 0, the div stay the same place as it is in normal flow. But in the case 1, the offsetParent is the td, in case 2, the offsetParent is the body. It doesn't look right, in the case 2, if the offsetParent of the div is the body, it should position relative to the body, that means the top left corner of the window in my case.

Any idea?

Thanks.

[Paul O'B]

Hi,

I don't know about javascript and offset parent but I can advise you on how css see things

When you place an object with position:relative and use left:0 and top:0 then you are in fact not moving it anywhere as you rightly stay.

However yoyu are creating a stacking context for nested elements and for the element itself.

The parent of a positioned element is the nearest ancestor that has a value defined for the property position.

Therefore the parent of the relative element in your page will default to the html root element (the body outside of margins).

To make the td the parent then the td needs to have position:relative set also and then it will become the parent for the relatively placed div.

<table>
<tr><td>...</td></tr>
<tr><td style="position:relative">
<div id="test" style="position:relative;top:0;left:0;"></div>
</td></tr></table

Positioned elements and static elements are obviously treated differently once you add positioning propeties to them.

I assume the same may hold true for offsetParent but thats not my area so perhaps someome else will confirm.

Paul

Edit:


Have a look here it seems to confirm my suspicions.:
http://msdn.microsoft.com/library/de...de04032000.asp