offsetParent 演算法分析

以下部分內容翻譯自 w3c 的 cssom view module，w3c 工作草案 2023年2月22日。

當呼叫元素 a 的 offsetparent 屬性時，必須按以下演算法返回元素。

以下任一條件為真時，返回 null，並停止本演算法。

a 是根元素。

a 是 html 的 body 元素。

元素 a 的 position 屬性計算值是 fixed。注 1

如果 a 是 html 元素 area，並且在其上級元素鏈中有 html 元素 map，返回上級元素鏈中距 a 最近的 html 元素 map，並停止本演算法。注 2

如果以下任一條件為真時，返回距 a 最近的符合下述條件的上級元素，並停止本演算法。

上級元素的 position 屬性計算值不是 static。注 3

上級元素是 html 的 body 元素。注 4

a 的 position 屬性計算值是 static，上級元素是 td、th 或 table。

返回 null。

前面已經提到，以上是工作草案的內容，所以與現行的瀏覽器不一定一致，注釋如下：

注 1 firefox 不適用；ie 6 不適用；doctype 使 ie 7 不支援 fixed 時不適用（以下簡稱 ie 6 模式）。

注 2 firefox 不適用。

注 3 上級元素的 position 屬性計算值是 fixed，並且 ie 6 或者 ie 6 模式不適用。

注 4 ie 7 模式中，如果元素的 position 屬性計算值是 absolute 或 relative，返回元素 html，而不是 body。

總結由此看出，獲得 offsetparent 在各個瀏覽器中，各個瀏覽器的各個版本中，同一版本的不同模式中，都有不同的演算法，實在有些麻煩。所以還是建議將其理解為通過 offsetparent 迴圈和 offsetleft、offsettop 可以獲得控制項在瀏覽器中的絕對位置即可。

但慶幸的是有一種常見布局在各種瀏覽器中 offsetparent 是一樣的，那就是：外層元素 div 的 position 計算值是 relative、absolute 時，內層元素 div 的 offsetparent 總是外層元素 div。