获取元素在页面中的相对定位、绝对定位

获取元素在页面中的位置：
绝对定位：到body的距离
相对定位：到视口的距离

绝对定位可以用以下封装的函数进行取值：

function getPointAb(node){
var x = 0;
var y = 0;
while(node){
x += node.offsetLeft;
y += node.offsetTop;
node = node.offsetParent;
}
return {x:x;y:y};
}

鼠标滚轮滚动的距离取值：
滚动条滚动时，实际上是元素滚动的距离

 var L = document.documentElement.scrollLeft||document.body.scrollLeft;
 var T = document.documentElement.scrollTop||document.body.scrollTop;

根据以上两个，可以得出，相对定位的封装函数：

 function getPointRe(node){
		var x = 0;
		var y = 0;
		while(node){
		   x += node.offsetLeft;
		   y += node.offsetTop;
		   node = node.offsetParent;
		}
        var L = document.documentElement.scrollLeft||document.body.scrollLeft;
        var T = document.documentElement.scrollTop||document.body.scrollTop;
	    return {x:x-L;y:y-T};
}

注意：以上这些方法均是在border、margin为0时适用。

不过以上方法太复杂了，现在用getBoundingClientRect()来代替。getBoundingClientRect()方法返回元素的大小及其相对于视口的位置，也就是相对位置。

getBoundingClientRect()方法返回的left和right是元素左上角的相对位置； right和bottom返回的是右下角的相对位置；Height和width代表的是border-box的尺寸

左上角的相对位置和右下角的相对位置都知道了，就可以取到右上和左下角的相对位置，并且无论margin，border都会算进去的。就不用考虑那么多。那么

绝对位置，就是相对位置+滚动条滚动的距离 = 绝对位置
一般好用的东西兼容性都不好，但是这个API是比较特殊的，它的兼容性是非常好的，可以放心大胆的去用。