<原文地址：http://blog.sina.com.cn/s/blog_995c1f630101aba4.html>
offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲根元素(在標準兼容模式下爲html元素；在怪異呈現模式下爲body元素)的引用。當容器元素的style.display 被設置爲 "none"時（譯註：IE和Opera除外），offsetParent屬性 返回 null 。
句法：
parentObj = element.offsetParent
變量：
parentObj 是一個元素的引用，當前元素的偏移量在其中計算。
規範：
DOM Level 0. 並非規範的一部分.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x_x_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<div id="parent">
<p id="sonObj">測試OffsetParent屬性</p>
</div>
</body>測試結果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY"
結論：當某個元素及其父元素都未進行CSS定位時，則這個元素的offsetParent屬性的取值爲根元素。更確切地說，這個元素的各種偏移量計算 （offsetTop、offsetLeft等）的參照物爲Body元素。（其實無論是標準兼容模式還是怪異模式，根元素都爲Body元素）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#parent{
position:absolute;
<!--position：relative;-->
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x_x_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<div id="parent">div測試代碼<p id="sonObj">測試OffsetParent屬性</p></div>
</body>
</html> 測試結果：
Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"
結論：
當某個元素的父元素進行了CSS定位時（absolute或者relative），則這個元素的offsetParent屬性的取值爲其父元素。更確切地說，這個元素的各種偏移量計算（offsetTop、offsetLeft等）的參照物爲其父元素.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#Grandfather{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x_x_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">測試OffsetParent屬性</p>
</div>
</h1>
</body>
</html>
測試結果：
Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"
結論：
當某個元素及其父元素都未進行CSS定位時（absolute或者relative），則這個元素的offsetParent屬性的取值爲在DOM結構層次中距離其最近，並且已進行了CSS定位的元素。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
#sonObj{
position:relative;
left:25px;
top:188px;
border:1px solid black;
}
</style>
<script type="text/javascript" language="JavaScript">
function offset_init(){
var pElement = document.getElementByIdx_x("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body οnlοad="offset_init()">
<h1 id="Grandfather">
<div id="parent">
<p id="sonObj">測試OffsetParent屬性</p>
</div>
</h1>
</body>
</html>
測試結果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY"
結論：
當只有某個元素進行了CSS定位，其父元素及其DOM結構層次上都未進行CSS定位時，則這個元素的offsetParent屬性的取值爲HTMLBODYElement。更確切地說，這個元素的各種偏移量計算（offsetTop、offsetLeft等）的參照物爲Body元素。
element.offsetLeft屬性
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定義：返回一個像素數值，它表示當前元素的左邊緣到它的offsetParent屬性返回的對象左邊緣的偏移量。
句法：
leftDis = element.offsetLeft
offsetLeft屬性在Internet Explorer中的實現存在Bug，無論當前元素的offsetParent屬性取值如何，它總是以Body元素爲參照物來計算offsetLeft。幸運的是，這個Bug在Intern Explorer 8 Beta 1中已經修復。仍然需要注意，IE會從Body元素的Left-Border爲標準開始計算OffsetLeft，而其他的瀏覽器將從Left-Margin開始計算。
......即使在IE中，offsetParent不是Body元素，offsetLeft的計算也以Body元素爲標準。......
offsetTop屬性
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定義：
返回一個數值，指明瞭當前元素的上邊緣到其offsetTop屬性返回的對象的上邊緣的距離。
句法：
topDis = element.offsetTop
前面對於offsetLeft的Bug也存在於offsetTop屬性中，同樣，這個Bug在IE 8 Beta 1中也已經修復。
圖三：在IE7及以下版本中，offsetsetTop屬性的Bug。
當然也不要在內聯標籤內嵌入標籤，因爲WebKit內核瀏覽器會錯誤解釋offsetParent屬性。
offsetWidth屬性
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定義：
當前元素的寬度。
句法：
elementWidth = element.offsetWidth
需要指出的是，offsetWidth屬性所指的寬度是當前元素的width+padding+border+margin的總和。
offsetHeight屬性
支持的瀏覽器：Internet Explorer 4.0+，Mozilla 1.0+，Netscape 6.0+，Opera 7.0+，Safari 1.0+
定義：
當前元素的高度。
句法：
elementHeight = element.offsetHeight
同樣，offsetWidth屬性所指的高度是當前元素的Height+padding+border+margin的總和。
以上所說的四個屬性再加上上一篇文章的offsetParent屬性其實都不是Dom規範的一部分，但是目前的瀏覽器都實現了它們，這幾個屬性也是實現Javascript拖拽功能的核心元素。因此一定要深入理解它們。