如果您使用jQuery，这可能是一个简单的解决方案：

<script>
  var el = $("#element");
  var position = el.position();
  console.log( "left: " + position.left + ", top: " + position.top );
</script>

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

原型jQuery框架YUI（雅虎）

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

这是一个使用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));
}

小与小的区别

function getPosition( el ) {
    var x = 0;
    var y = 0;
    while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    x += el.offsetLeft - el.scrollLeft;
    y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
    }
    return { top: y, left: x };
}

查看坐标示例：http://javascript.info/tutorial/coordinates

要有效地检索相对于页面的位置，而不使用递归函数：（还包括IE）

var element = document.getElementById('elementId'); //replace elementId with your element's Id.
var rect = element.getBoundingClientRect();
var elementLeft,elementTop; //x and y
var scrollTop = document.documentElement.scrollTop?
                document.documentElement.scrollTop:document.body.scrollTop;
var scrollLeft = document.documentElement.scrollLeft?                   
                 document.documentElement.scrollLeft:document.body.scrollLeft;
elementTop = rect.top+scrollTop;
elementLeft = rect.left+scrollLeft;

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

offsetLeft
offsetTop

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

IE和FF3具有

clientLeft
clientTop

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