clientTop offsetTop scrollTop
三、获取页面元素绝对定位坐标
有了以上知识基础之后，我们现在需要考虑的问题是，如何获取页面元素的绝对位置，也就是在文档流内容区的位置。我们知道，元素的 offsetTop 属性可以获取当前元素边框外围至父元素边框内围的的距离，clientTop 可以获取元素边框的宽度。那么现在用一个递归的公式就可以求得当前元素在页面中的绝对位置：
Element.absoluteTop = Element.parent.absoluteTop + Element.offsetTop + Element.clientTop;
同理，我们用参照元素的长宽减去 left 和 top 和定位，即可得到 right 和 bottom 的定位；
所以我们可以编写以下工具来获取元素的绝对位置，也就是在内容区的定位（参照元素必须是目标元素的祖先元素）：
1 var Position = {};
2 (function () {
3 Position.getAbsolute = function (reference, target) {
4 //因为我们会将目标元素的边框纳入递归公式中，这里先减去对应的值
5 var result = {
6 left: -target.clientLeft,
7 top: -target.clientTop
8 }
9 var node = target;
10 while(node != reference && node != document){
11 result.left = result.left + node.offsetLeft + node.clientLeft;
12 result.top = result.top + node.offsetTop + node.clientTop;
13 node = node.parentNode;
14 }
15 if(isNaN(reference.scrollLeft)){
16 result.right = document.documentElement.scrollWidth - result.left;
17 result.bottom = document.documentElement.scrollHeight - result.top;
18 }else {
19 result.right = reference.scrollWidth - result.left;
20 result.bottom = reference.scrollHeight - result.top;
21 }
22 return result;
23 }
24 })();
此方法可以获取一个元素相对于一个父元素的定位，如果要获取元素在整张页面，直接传入 document 即可：
1 Position.getAbsolute(document, targetNode); //{left: left, right: right, top: top, bottom: bottom}
四、获取元素的可视区定位坐标在上一小节中，我们封装了一个函数，这个函数可以用来获取一个元素的相对于一个祖先元素的绝对定位坐标，在这一小节中，我们来获取元素相对于浏览器窗口可视区域的定位坐标。在上一个函数中，我们可以获取一个元素在 document 当中的定位，还记得我们在第二小节中的 scrollTop 属性吗？该属性可以获取滚动窗口可视区域顶端距离内容区顶端的距离，我们用元素的绝对定位坐标减去 document 的滚动定位就是我们想要的浏览器窗口定位啦（相对于浏览器左上角）：
ViewportTop = Element.absoluteTop - document.body.scrollTop;