我怎样才能在Javascript在网页上的对象的绝对位置？ [重复](How can I get

这个问题已经在这里有一个答案：

检索HTML元素的位置（X，Y） 25分的答案

我想获得一个物体的绝对X，在Javascript在页面上y位置。我怎样才能做到这一点？

我试图obj.offsetTop和obj.offsetLeft ，但这些只给相对于父元素的位置。我想我可以通过循环，增加家长的偏移和其父的偏移，依此类推，直到我去没有父对象，但似乎应该有一个更好的办法。谷歌搜索不转了很多，即便如此网站搜索没有找到任何东西。

另外，我无法使用jQuery。

Answer 1:

var cumulativeOffset = function(element) {
    var top = 0, left = 0;
    do {
        top += element.offsetTop  || 0;
        left += element.offsetLeft || 0;
        element = element.offsetParent;
    } while(element);

    return {
        top: top,
        left: left
    };
};

（方法无耻地从PrototypeJS被盗;代码风格，变量名和返回值改变，以保护无辜）

Answer 2:

我肯定会建议使用element.getBoundingClientRect（）。

https://developer.mozilla.org/en-US/docs/Web/API/element.getBoundingClientRect

摘要
返回包括一组文本矩形文本矩形对象。
句法
var rectObject = object.getBoundingClientRect();

返回
返回值是一个TextRectangle对象，它是由返回的矩形的并集（）getClientRects为元素，即与元件相关联的CSS边界框。
返回值是一个TextRectangle对象，其中包含只读left ， top ， right和bottom描述边界框，以像素为单位，与左上相对于属性左上方视口。

下面是从链接MDN网站采取了浏览器的兼容性表：

+---------------+--------+-----------------+-------------------+-------+--------+
|    Feature    | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
+---------------+--------+-----------------+-------------------+-------+--------+
| Basic support | 1.0    | 3.0 (1.9)       | 4.0               | (Yes) | 4.0    |
+---------------+--------+-----------------+-------------------+-------+--------+

它被广泛的支持，是很容易使用，更何况，它的真快。下面是从约翰Resig的一篇相关文章： http://ejohn.org/blog/getboundingclientrect-is-awesome/

您可以使用它像这样：

var logo = document.getElementById('hlogo');
var logoTextRectangle = logo.getBoundingClientRect();

console.log("logo's left pos.:", logoTextRectangle.left);
console.log("logo's right pos.:", logoTextRectangle.right);

这里是一个非常简单的例子： http://jsbin.com/awisom/2 （可以查看并点击“编辑在JS斌”，在右上角的编辑代码）。

或者，这里是另外一个使用Chrome的控制台：

注意：

我不得不提到的是， width和height的属性getBoundingClientRect()方法的返回值是undefined Internet Explorer 8中它可以在Chrome 26.x，20.x的Firefox和Opera的12.x虽然。解决方法在IE8：为width ，你能减去返回值的右侧和左侧的属性以及height ，你可以减去底部和顶部的属性（像这样）。