作者：未知 來源於：網路轉載 發布時間：2006-9-30 23:42:32
一直以為offsetParent和parentElement是一回事，最近在做web控制項才發現原來的理解是大錯特錯。
parentElement 在msdn的解釋是Retrieves the parent object in the object hierarchy.
而offsetParent在msdn的解釋是Retrieves a reference to the container object that defines the offsetTop and offsetLeft properties of the object. 這個解釋有些模糊。我們再來看看他的remarks
Most of the time the offsetParent property returns the body object.
大多說offsetParent返回body
Note In Microsoft Internet Explorer 5, the offsetParent property returns the TABLE object for the TD object; in Microsoft Internet Explorer 4.0 it returns the TR object. You can use the parentElement property to retrieve the immediate container of the table cell.
對於IE 5.0以上，TD的offsetParent返回Table。
但是msdn並沒有討論在頁面td元素中存在絕對/相對定位時offsetParent的值。
以下是我個人總結的規律
在td中的元素會把第一個絕對／相對定位的hierarchy parent當作offsetParent，如果沒有找到需要分三種情況討論
一，如果該元素沒有絕對／相對定位，則會把td當作offsetParent
二，如果該元素絕對／相對定位並且table沒有絕對／相對定位，則會把body當作offsetParent
三，如果該元素絕對／相對定位並且table絕對／相對定位，則會把table當作offsetParent
看一下範例程式碼
1.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
運行結果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
2.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
運行結果parentdiv.offsetParent.tagName IS "body"
sondiv.offsetParent.id IS "parentdiv"
3.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
運行結果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "body"
4.<BODY >
<TABLE BORDER=1 ALIGN=right>
<TR>
<TD ID=oCell><div id="parentdiv" >parentdiv<div id="sondiv">sondiv</div></div></TD>
</TR>
</TABLE>
運行結果parentdiv.offsetParent.tagName IS "TD"
sondiv.offsetParent.tagName IS "TD"
5.<BODY >
<TABLE BORDER=1 ALIGN=right style="position:relative">
<TR>
<TD ID=oCell><div id="parentdiv" style="position:relative" >parentdiv<div id="sondiv" style="position:relative">sondiv</div></div></TD>
</TR>
</TABLE>
運行結果parentdiv.offsetParent.tagName IS "Table"
sondiv.offsetParent.tagName IS "parentdiv"
