元素的offsetParent offsetLeft offsetTop属性
offsetParent:指定最近的祖先定位祖先元素，如果没有的话，指向根元素或者整个文档。
offsetLeft, offsetTop:计算子元素相对offsetParent的偏移距离
下面是测试代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>offsetX</title> <style type = "text/css"> html { margin: 20px; border:3px solid red; padding: 20px; } /*body的边框为橙色*/ body { padding: 20px; margin: 20px; border: 1px solid orange; } /*蓝色边框div*/ #wrapper { padding: 20px; margin: 0; border: 1px solid blue; width: 500px; } /*绿色边框的div*/ #div1 { width: 200px; height: 200px; border: 3px solid red; background: gold; margin-bottom: 20px; } /*嵌套在绿色边框里面的红色边框div*/ #div1_1 { width: 100px; height: 100px; border: 3px solid green; padding: 0; margin: 49px; background: silver; } /*黑色边框div，用来显示*/ #div2 { width: 200px; height: 200px; border: 1px solid black; } #div3 { margin: 1000px; } </style> <!--myUtil.js是外部js文件--> <script type = "text/javascript" src = "myUtil.js"></script> <script type = "text/javascript"> function test() { myUtil.addEvent("div1_1", "mousemove", function(event) { event = myUtil.getEventObject(event); var div2 = myUtil.byId("div2"); div2.innerHTML = "parentNode: " + this.offsetParent.nodeName + "<br /> X: " + this.offsetLeft + " Y: " + this.offsetTop ; }); } </script> </head> <body onload = "test()"> <div id = "wrapper"> <div id = "div1"><div id = "div1_1"></div></div> <div id = "div2"></div> </div> </body> </html>
代码运行后的效果:
最外层红色边框为html元素
第二层橙色边框为body元素
第三层蓝色边框为id为wrapper的div框
金色背景，红色边框是id为div1的div框
银色背景，绿色边框时id为div1_1的div框
黑色边框为id为div2的显示div框
总结来说：
1 当子框(也就是这里的银色div框，id为div1_1)的父元素有定位时(可能是相对定位，或者绝对定位，或者固定定位),那么offsetParent就是这个定位的父元素，而不管这个子框的定位情况(可能定位，也可能没定位)。
2 而当着个子框有定位，而它的父元素没有定位时，分成子框相对定位和绝对定位(固定定位也一样)两种情况:
(1) 子框相对定位时，父元素没有定位，那么offsetParent在火狐中是html元素左上角(虽然代码结果显示的是body元素，但是通过计算发现不是),而在IE8中offsetParent是相对于整个文档左上角(并不是html元素，而是html元素外面空白区域的左上角);
(2) 若子框是绝对定位，父元素没有定位，那么在火狐和IE8中都是相对于整个文档的左上角。
(3) 若子框和父元素都没定位，那么offsetParent在火狐中是html元素，而IE8中offsetParent是整个文档
同时，在火狐和IE8中offsetLeft和offsetTop的计算方式不一样:
在火狐中，offsetLeft，offsetTop是从父元素左上角(是左边框和上边框同padding交界的位置)到子框左上角(左边框和上边框和外边距margin交界的位置)的距离；
在IE8中，offsetLeft，offsetTop是从父元素的左上角(是左边框和上边框同外边距margin交界的位置)到子边框左上角(同火狐)的距离
