offsetLeft和offsetTop
表示相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值
下面的例子中，初次进页面，点击第一个按钮，返回的偏移距离时相对于html文档左上角的偏移值；
第二个按钮则是相对于div，因为将他的父元素div的position属性设为了relative
第三个和第四个则都是相对于body定位
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> </style> <script> window.onload = function () { }; </script> </head> <body> <div id="div1"> <input id="btn1" type="button" value="父元素为默认定位的时候"/> <br/> <input id="btn2" type="button" value="应用父元素为relative"/> <br/> <input id="btn3" type="button" value="自己定位为relative"/> <br/> <input id="btn4" type="button" value="自己定位为absolute"/> </div> <script> var oBtn1 = document.getElementById('btn1'); oBtn1.onclick = function () { alert(this.offsetParent.tagName); alert('offsetLeft:'+this.offsetLeft+'offsetTop:'+this.offsetTop); }; var oBtn2 = document.getElementById('btn2'); oBtn2.onclick = function () { document.getElementById('div1').style.position = 'relative'; this.value = "应用成功"; alert(this.offsetParent.tagName); alert('offsetLeft:'+this.offsetLeft+'offsetTop:'+this.offsetTop); }; var oBtn3 = document.getElementById('btn3'); oBtn3.onclick = function () { this.style.position = "relative"; this.style.left = 20+'px'; this.style.top = 20+'px'; alert(this.offsetParent.tagName); alert('offsetLeft:'+this.offsetLeft+'offsetTop:'+this.offsetTop); }; var oBtn4 = document.getElementById('btn4'); oBtn4.onclick = function () { this.style.position = "absolute"; this.style.left = 20+'px'; this.style.top = 20+'px'; alert(this.offsetParent.tagName); alert('offsetLeft:'+this.offsetLeft+'offsetTop:'+this.offsetTop); }; </script> </body> </html>
offsetParent元素只可能是下面这几种情况：
<body>position不是static的元素<table>,<th>或<td>，但必须要position: static。
在这个例子中，页面是没有任何定位元素，于是，点击按钮后返回的就是body标签了。
body元素为定位元素的终极boss，所以其上头就没有其他定位元素了。也就是说body元素没有offsetParent（尽管有时候html进入offsetParent链）。
另外，在IE和Opera浏览器下，position: fixed的元素没有offsetParent