offsetParent屬性返回一個對象的引用，這個對象是距離調用offsetParent的元素最近的（在包含層次中最靠近的），並且是已進行過CSS定位的容器元素。如果這個容器元素未進行CSS定位, 則offsetParent屬性的取值爲根元素(在標準兼容模式下爲html元素；在怪異呈現模式下爲body元素)的引用。當容器元素的style.display 被設置爲 "none"時（譯註：IE和Opera除外），offsetParent屬性 返回 null。
句法：
parentObj = element.offsetParent
變量：
· parentObj 是一個元素的引用，當前元素的偏移量在其中計算。
代碼
<!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.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="offset_init()">
<div id="parent">
<p id="sonObj">測試OffsetParent屬性</p>
</div>
</body>
</html>
測試結果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY
結論：
當某個元素及其DOM結構層次中元素都未進行CSS定位時(absolute或者relative)[或者某個元素進行CSS定位時而DOM結構層次中元素都未進行CSS定位時],則這個元素的offsetParent屬性的取值爲根元素。更確切地說，這個元素的各種偏移量計算（offsetTop、offsetLeft等）的參照物爲Body元素。(其實無論時標準兼容模式還是怪異模式，根元素都爲Body元素)
測試代碼2
<!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.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="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等）的參照物爲其父元素
測試代碼3
<!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.getElementById("sonObj");
parentObj = pElement.offsetParent;
alert(parentObj.tagName);
}
</script>
</head>
<body onload="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定位的元素。