offsetParent作用范围（Neatstudio.COM）

在看代码的时候看到了这个offsetParent也就顺便找了一下资料：

XML/HTML代码

offsetParent从字面上理解，这是在查找元素的父亲．可实际应用中，根据浏览器他会返回不同的结果．在Opera较低版本中返回被引用元素的直接父元素，在IE中使用offsetParent有时会返回body元素，有时会返回被引用元素的父元素．为什么IE会这样．我会在下面的实例演示中解释清楚．而在FireFox中他总是返回body元素．
注意：offsetLeft与offsetTop永远是根据offsetParent来返回值，如果offsetParent返回的是父元素，那么他们就返回与父元素的偏移结果，如果offsetParent返回的是body元素，那么他们就返回与body元素的偏移结果．请根据浏览器进行测试．

然后找了一段代码进行测试：

XML/HTML代码

<html>
<head>
<title>Dom：offsetParent使用</title>
</head>
<body>
<p>该网页中有4个div 他们的id值分别是a,a_1,b,b_1<br/> a包含了a_1．b包含了b_1<br/> a和b是相互独立的．．下面我们分别对a_1和b_1两个子元素使用offsetParent方法．
你用IE浏览器测试，你会发现a1的运函数弹出body，而b1的运行函数返回了div，同样的两个子元素．同样的使用方法．为什么返回的结果不一样呢？原因就是我为b1的父元素b,增加了一个宽度属性以后．他就把offsetParent看做是元素的父元素．如果不为b元素指定任何属性样式，他则返回body
而在火狐和谷歌浏览器中两次都会弹出body,不会受此影响．</p>
<div id="a">
<div id="a_1"></div>
</div>
<div id="b" style="width:200px;">
<div id="b_1"></div>
</div>
<script type="text/javascript">
function a1_offsetParent() { //测试b元素的offsetParent
var a_1 = document.getElementById("a_1");
alert(a_1.offsetParent.tagName);
}
a1_offsetParent();//运行a1测试函数
function b1_offsetParent() {
var b_1 = document.getElementById("b_1");
alert(b_1.offsetParent.tagName);
}
b1_offsetParent();//运行b1测试函数
</script>
</body>
</html>

这个时候就象上面的说明所说的，在firefox和webkit核心下两者都返回了“body”，然而：

XML/HTML代码

于是我在div的id="b"的style里加入了position:absolute，然后再测试，果然就返回了DIV。

XML/HTML代码

学习完毕，上述的信息来自：http://www.web666.net/dom/offsetParent.html

易栈网-膘叔