在操作頁面滾動和動畫時經常會獲取 DOM 元素的絕對位置，例如 本文 左側的懸浮導航，當頁面滾動到它以前會正常地渲染到文檔流中，當頁面滾動超過了它的位置，就會始終懸浮在左側。

本文會詳述各種獲取 DOM 元素絕對位置 的方法以及對應的兼容性。關于如何獲取 DOM 元素高度和滾動高度，請參考視口的寬高與滾動高度 一文。

概述

這些是本文涉及的 API 對應的文檔和標準，供查閱：

offsetTop/offsetLeft

HTMLElement.offsetTop 用來獲取當前元素（不包括上邊框）相對于定位容器（positioning container）的位置。也就是說，

如果所有祖先元素都是靜態定位 position:static;（這是默認的情況），offsetTop 表示與文檔最上方的高度差（文檔最上方可能已經滾出視口，這個高度可能大于視口高度）。

如果存在絕對定位的祖先元素 position:absolute/fixed，offsetTop 就會相對于這個元素。因此為了獲取相對于文檔最上方的高度差，需要遞歸地調用：

function getOffsetTop(el){ return el.offsetParent  ? el.offsetTop + getOffsetTop(el.offsetParent)  : el.offsetTop}

el.offsetParent 是當前元素的定位容器（positioning container），如果當前元素沒有絕對定位的祖先節點，這個屬性的值就是 null。

兼容性和限制：幾乎所有瀏覽器都支持該屬性。如果元素被隱藏它的值就是 0，但在 IE9 下沒有影響。

clientTop/clientLeft

不要被名字誤導，Element.clientTop 是指當前元素的 上邊框的寬度 的整數值。總是等于 getComputedStyle() 返回的 border-top-width 屬性的四舍五入為整數后的值。