offsetTop：以 CSS 像素为单位返回元素上边框距其 offsetParent 上边框的距离。
offsetLeft：以 CSS 像素为单位返回元素相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
这里最主要的是找准 offsetParent。
其实很简单，比如我们要计算A元素的 offsetTop， 那么先要找到A元素的offsetParent，A元素的offsetParent应该是离A元素最近的父元素，并且父元素设置了position：relative或absolute属性，如果没有匹配到任何父元素，那么应该以窗口为基准计算元素的offsetTop。
下面用实例来说明：
<!Doctype html><html ns=http://www.w3.org/1999/xhtml>;
<head>
< http-equiv=Content-Type content=\"text/html;charset=utf-8\">
</head>
<body style=\"margin:0;padding-left:10px;\">
<div id=\"main\">
<div id=\"first\" style=\"width:300px; height:200px; border:1px solid red\">300X200的盒子</div>
<div id=\"second\">
<div id=\"third\">offsetTop详解</div>
</div>
</div>
< type=\"text/ \">
var oTop=document.getElementById(\"third\").offsetTop;//此时获取id为third元素的offsetTop，是以窗口基准，即得到的值是该元素距离窗口的垂直距离(202px, 算上了id为first元素的border)。
var oLeft=document.getElementById(\"third\").offsetLeft; //以窗口基准，值为10px(body设置了10px的左内边距)。
//下面我们改变一下id为second元素的css，加上\"style=\'position:relative;padding-left:100px\'\"，然后重新获取id为third元素的offsetTop，此时值为0；因为现在不是以窗口基准，而是以id为third元素为基准计算。同理offsetLeft的值是100px;
</ >
</body>
</html> 继续阅读与本文标签相同的文章
-
Snap推出动态广告功能 以期吸引更多广告商
2026-05-15栏目： 教程
-
资费高 广告多 有线电视为何没有被网络盒子打败？
2026-05-15栏目： 教程
-
还在抵抗基站？也许很快每个家庭内部都会安装一个基站
2026-05-15栏目： 教程
-
遇到腾讯QQ群里假扮QQ小冰，如何识破？
2026-05-15栏目： 教程
-
EXCEL定位功能？看这一篇就够了
2026-05-15栏目： 教程