这是一个使用vanilla JS递归迭代element.offsetTop和element.ooffsetParent的现代1行代码：

功能：

getTop = el => el.offsetTop + (el.offsetParent && getTop(el.offsetParent))

用法：

const el = document.querySelector('#div_id');
const elTop = getTop(el)

优势：

无论当前滚动位置如何，始终返回绝对垂直偏移。

传统语法：

function getTop(el) {
  return el.offsetTop + (el.offsetParent && getTop(el.offsetParent));
}

如果使用jQuery，维度插件非常出色，可以让您精确地指定所需内容。

e.g.

相对位置，绝对位置，无填充的绝对位置，有填充。。。

继续下去，让我们说你可以用它做很多事情。

另外，使用jQuery的好处是它的文件大小很小，使用起来很方便，以后如果没有它，就不会返回JavaScript。

我发现的最干净的方法是jQuery的偏移所使用的技术的简化版本。与其他一些答案类似，它从getBoundingClientRect开始；然后，它使用窗口和documentElement来调整滚动位置以及正文上的边距（通常是默认值）。

var rect = el.getBoundingClientRect();
var docEl = document.documentElement;

var rectTop = rect.top + window.pageYOffset - docEl.clientTop;
var rectLeft = rect.left + window.pageXOffset - docEl.clientLeft;

var els=文档.getElementsByTagName（“div”）；var docEl=文档.documentElement；对于（var i=0；i<els.length；i++）{var rect=els[i].getBoundingClientRect（）；var rectTop=rect.top+window.pageYOffset-docEl.clientTop；var rectLeft=rect.left+window.pageXOffset-docEl.clientLeft；els[i].innerHTML=“<b>”+rectLeft+“，”+rectTop+“</b>”；}第二部分{宽度：100px；高度：100px；背景色：红色；边框：1px实心黑色；}#相关{位置：相对；左：10px；顶部：10px；}#绝对值{位置：绝对；顶部：250px；左：250px；}<div id=“rel”></div><div id=“abs”></div><div></div>

大多数浏览器上的HTML元素将具有：-

offsetLeft
offsetTop

它们指定元素相对于其最近的具有布局的父元素的位置。通常可以通过offsetParent属性访问此父级。

IE和FF3具有

clientLeft
clientTop

这些财产不太常见，它们使用其父工作区指定元素位置（填充区是工作区的一部分，但边界和边距不是）。

此函数返回元素相对于整个文档（页面）的位置：

function getOffset(el) {
  const rect = el.getBoundingClientRect();
  return {
    left: rect.left + window.scrollX,
    top: rect.top + window.scrollY
  };
}

使用此选项，我们可以获得X位置：

getOffset(element).left

…或Y位置：

getOffset(element).top

使用JavaScript框架可能会更好地为您服务，该框架具有以独立于浏览器的方式返回此类信息（以及更多信息！）的功能。以下是一些：

原型jQuery框架YUI（雅虎）

使用这些框架，您可以执行以下操作：$（'id-of-img'）.top以获得图像的y像素坐标。