js如何获取网页元素的绝对位置

什么是网页元素的绝对位置和相对位置

网页元素的绝对位置，是指该元素的左上角相对于整张网页的左上角的坐标。
网页元素的相对位置，是指该元素的左上角相对于视口的左上角的坐标。

如何获取绝对位置

由于每个元素都有 offsetTop 和 offsetLeft 属性， 表示该元素左上角与父容器（offsetParent对象）左上角的距离。
所以可以遍历一下元素的祖先容器，把所有的 offsetTop 加起来得到。

var element = document.getElementById('article_container')
var actualTop = element.offsetTop; // 绝对位置
var current = element.offsetParent;
while (current !== null){
　　actualTop += current.offsetTop;
　　current = current.offsetParent;
}

如何获取相对位置

有了绝对位置，获得相对位置就容易了，可以通过绝对坐标减去页面滚动条滚动的距离来得到。
滚动条滚动的垂直距离，是 document 对象的 scrollTop 属性，滚动的水平距离，是 document 对象的 scrollLeft 属性。scrollTop 和 scrollLeft 是可以赋值的，并且会立即自动滚动网页到相应位置。可以利用它们改变元素的相对位置。另外，elment.scrollIntoView() 方法也有类似作用，可以使网页元素出现在浏览器窗口的左上角（不过需要在支持 html5 的浏览器才能生效）。

var elementScrollTop = document.documentElement.scrollTop; 
var relativeTop = actualTop-elementScrollTop; // 相对位置

快速获取元素的绝对位置和相对位置

使用 js 的 getBoundingClientRect() 方法。她会返回一个对象，包含 left， right， top， bottom 四个属性，分别对应该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。

var dom = document.getElementById('article_container');
// 相对位置
var rLeft = dom.getBoundingClientRect().left;
var rTop = dom.getBoundingClientRect().top;

// 绝对位置（相对位置+滚动距离）
var aLeft = rLeft + document.documentElement.scrollLeft;
var aTop = rTop + document.documentElement.scrollTop;