offsetParent屬性返回一個(gè)對(duì)象的引用，這個(gè)對(duì)象是距離調(diào)用offsetParent的元素最近的（在包含層次中最靠近的），并且是已進(jìn)行過(guò)CSS定位的容器元素。如果這個(gè)容器元素未進(jìn)行CSS定位,則offsetParent屬性的取值為根元素(在標(biāo)準(zhǔn)兼容模式下為html元素；在怪異呈現(xiàn)模式下為body元素)的引用。當(dāng)容器元素的style.display 被設(shè)置為 "none"時(shí)（譯注：IE和Opera除外），offsetParent屬性 返回 null。
句法：
parentObj = element.offsetParent
變量：
· parentObj 是一個(gè)元素的引用，當(dāng)前元素的偏移量在其中計(jì)算。
測(cè)試代碼1：
<!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">測(cè)試OffsetParent屬性</p>
</div>
</body>
</html>
測(cè)試結(jié)果：
Firefox3："BODY"
Internet Explorer 7："BODY"
Opera 9.51："BODY"
Chrome 0.2："BODY"
Safari 3："BODY
結(jié)論：
當(dāng)某個(gè)元素及其DOM結(jié)構(gòu)層次中元素都未進(jìn)行CSS定位時(shí)(absolute或者relative)[或者某個(gè)元素進(jìn)行CSS定位時(shí)而DOM結(jié)構(gòu)層次中元素都未進(jìn)行CSS定位時(shí)],則這個(gè)元素的offsetParent屬性的取值為根元素。更確切地說(shuō)，這個(gè)元素的各種偏移量計(jì)算（offsetTop、offsetLeft等）的參照物為Body元素。(其實(shí)無(wú)論時(shí)標(biāo)準(zhǔn)兼容模式還是怪異模式，根元素都為Body元素)
測(cè)試代碼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測(cè)試代碼<p id="sonObj">測(cè)試OffsetParent屬性</p></div>
</body>
</html>
測(cè)試結(jié)果：
Firefox3："DIV"
Internet Explorer 7："DIV"
Opera 9.51："DIV"
Chrome 0.2："DIV"
Safari 3："DIV"
結(jié)論：
當(dāng)某個(gè)元素的父元素進(jìn)行了CSS定位時(shí)（absolute或者relative），則這個(gè)元素的offsetParent屬性的取值為其父元素。更確切地說(shuō)，這個(gè)元素的各種偏移量計(jì)算（offsetTop、offsetLeft等）的參照物為其父元素。
測(cè)試代碼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">測(cè)試OffsetParent屬性</p>
</div>
</h1>
</body>
</html>
Untitled Document
測(cè)試結(jié)果：
Firefox3："H1"
Internet Explorer 7："H1"
Opera 9.51："H1"
Chrome 0.2："H1"
Safari 3："H1"
結(jié)論：
當(dāng)某個(gè)元素及其父元素都未進(jìn)行CSS定位時(shí)（absolute或者relative），則這個(gè)元素的offsetParent屬性的取值為在DOM結(jié)構(gòu)層次中距離其最近，并且已進(jìn)行了CSS定位的元素。
對(duì)于IE 5.0以上，TD的offsetParent返回Table。
在td中的元素會(huì)把第一個(gè)絕對(duì)／相對(duì)定位的hierarchy parent當(dāng)作offsetParent，如果沒有找到需要分三種情況討論
一，如果該元素沒有絕對(duì)／相對(duì)定位，則會(huì)把td當(dāng)作offsetParent
二，如果該元素絕對(duì)／相對(duì)定位并且table沒有絕對(duì)／相對(duì)定位，則會(huì)把body當(dāng)作offsetParent
三，如果該元素絕對(duì)／相對(duì)定位并且table絕對(duì)／相對(duì)定位，則會(huì)把table當(dāng)作offsetParent
