一、概念
絕對位置：網頁元素的左上角相對于整張網頁左上角的坐標
相對位置：相對于瀏覽器窗口左上角的坐標
二、獲取方法
1、每個元素都有offsetTop和offsetLeft屬性，表示該元素的左上角與父容器（offsetParent對象）左上角的距離。
2、每個元素都有offsetParent屬性。offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進行過CSS定位的容器元素。 如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值為根元素(在標準兼容模式下為html元素；在怪異呈現模式下為body元素)的引用。
當容器元素的style.display 被設置為 "none"時（譯
注：IE和Opera除外），offsetParent屬性 返回 null 。
所以，只需要循環取得頁面元素的offsetParent，并逐步累加offsetTop和offsetLeft，就可以得到該元素的絕對坐標。
三、代碼
function getElementAbsPos(e)
{
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
return {left:l,top:t};
}四、問題
由于在iframe中，offsetParent對象未必等于父容器（同樣的，還有表格），所以通過getElementAbsPos函數得到并不是頁面元素的絕對位置，如下圖所示：
下面給出一個在iframe中正確獲取頁面元素的絕對位置的代碼：
/**
* @param e 頁面元素
* @param arrParentid 頁面元素e所在的iframe的數組
* @param isID 參數arrParentid中是iframe的id還是object
*/
function getElementAbsPos(e,arrParentid,isID)
{
var t = e.offsetTop;
var l = e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
if(arguments.length >= 2)
{
for(var i=0; i<arrParentid.length; i++)
{
e = (isID==true) ? top.document.getElementById(arrParentid[i]) : arrParentid[i];
t += e.offsetTop;
l += e.offsetLeft;
while(e = e.offsetParent)
{
t += e.offsetTop;
l += e.offsetLeft;
}
}
}
return {left:l,top:t};
}
以上就是Javascript獲取頁面元素的絕對位置實現的詳細內容，更多關于Javascript元素絕對位置的資料請關注其它相關文章！
原文地址：https://blog.csdn.net/sunlylorn/article/details/6673416