<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> *{ margin:0; padding:0} div {padding: 40px 50px;} #div1 {background: red;position: relative;} #div2 {background: green; position: relative;} #div3 {background: orange; position: relative;} </style> <script> window.onload = function() { var oDiv3 = document.getElementById('div3'); var iTop = 0;//初始化 var obj = oDiv3;//默认为oDiv3 while (obj) { iTop += obj.offsetTop;//offsetTop累加在变化 obj = obj.offsetParent;//父级也在变 //alert(obj + ' : ' + obj.id); //弹出父级 //alert( obj.id + ' : ' + obj.offsetTop );//弹出父级及offsetTop 的值 } alert( iTop );//弹出80*{ margin:0; padding:0} 初始化了的结果 若不写初始化边距为0的情况下 在火狐谷歌360ie8以上弹出88 默认边距8px 在ie7弹出95默认边距15 } </script> </head> <body id="body1"> <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html>