js 在操作绝对布局（或者fixed布局）元素的时候，经常需要动态根据元素当前的位置信息动态设置和处理元素的新位置信息，就需要反复借助元素的当前位置来进行辅助计算，本文就DOM元素涉及的常用位置api进行一个总结
一个经典示意图
一图胜千言
先来一张立体总结的经典图（抱歉出处忘了 …）
含义详解
clientTop[RO]: clientTop 表示的其实就是当前元素的对应上border宽度 (其实我感觉应该改名叫topBorderWidth更直观一点)，clientLeft 类似
style.top[RW]: 跟 style.* 相关的，读取的都是元素的 css 属性，这里的top只在 absolute / fixed / sticky 等布局中有效
scrollTop[RW]: 这个属性是针对内部可产生滚动的容器元素的，值是当前内部滚动的元素已经滚动到不可见区域的高度（当然这是对于垂直滚动的情况来说的）；这个属性不仅可以读出当前的滚动位置，也可以给其赋值来要求容器内的可滚动元素滚动到指定的位置，单位为px
offsetTop[RO]: 当前元素相对于offsetParent顶部的间隔，不包含border，可以理解为视觉上的”空白”间隔, offsetLeft 情况类似; 那什么是 offsetParent呢？根据MDN和DOM Spec，offsetParent 是当前元素的某个最近的祖先元素，这个祖先元素是 ① relative / fixed / absolute / sticky (可以理解为 position 可以为后代元素提供定位依据的，也就是除了 static) ，或者② 这个祖先元素是 table/td/th/body 中的一种
offsetHeight[RO]: 当前元素的包含 border 的总高度
clientHeight[RO]: border 以内的区域高度，可以理解为子元素可以活动的区域高度，注意，如果 box-sizing限制了为 border-box 的话，clientHeight的高度要等于元素的高度减去垂直方向上padding的高度和; clientWidth情况类似
scrollHeight[RO]: 一般对带滚动的容器元素使用，表示容器内部滚动的元素总高度；例如容器 C_1 里有两个子元素 E_1, E_2，子元素分别高 400px, 300px; 但父元素限制了高度为200px，超出的高度激活滚动；在这个case下，C_1的scrollHeight就等于700px; （注：对于没有设置滚动的元素，其scrollHeight 总是等于clientHeight）scrollWidth 情况类似
引申(鼠标事件中的位置属性)
我们在处理一些与鼠标行为相关的需求中，也时常会用到当事件发生时的鼠标位置，这些位置是被定义在 MouseEvent上的:
clientX / clientY: 表明了当事件发生时当前鼠标与 viewport 左上角的位置关系
pageX / pageY: 表明了当事件发生时当前鼠标与页面左上角的位置关系; 这里可以粗略理解为与 html元素左上角的关系
screenX / screenY: 表明了当事件发生时鼠标与屏幕左上角的位置关系，例如当我点击的是浏览器中的同一个位置，但因为浏览器的摆放位置不同，这个值也不同；（但我似乎暂时没有需要用到这个属性的地方）