引用文章：《参考链接 : js中的各种“位置”——“top、clientTop、scrollTop、offsetTop……”，你知道多少》
https://www.cnblogs.com/youziclub/p/4811069.html

引用文章：《关于offsetTop的理解》
https://blog.csdn.net/jinxi1112/article/details/90692484

引用文章：《鼠标事件以及clientX、offsetX、screenX、pageX、x的区别》
https://blog.csdn.net/weixin_41342585/article/details/80659736

引用文章：《搞清clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop》
https://blog.csdn.net/qq_35430000/article/details/80277587

拓展阅读：《html和body的区别》
https://www.iteye.com/blog/justcoding-2313021

拓展阅读：《详细了解 clientWidth、clientHeight、clientLeft、clientTop 以及几个常用的场景》
https://segmentfault.com/a/1190000019507352?utm_source=tag-newest

元素的位置

• top、clientTop、scrollTop、offsetTop
• height、clientHeight、scrollHeight、offsetHeight

诸如left、clientLeft、offsetLeft、width、clientWidth、scrollWidth等，和top、height类似，不再赘述

top

与css中的top属性值相同

clientTop

元素上边框的厚度，当没有指定边框厚底时，一般为0

scrollTop

页面最顶端和窗口中可见内容的最顶端之间的距离，简单地说就是滚动后被隐藏的高度

offsetTop和offsetPatent

1. offsetTop：元素到offsetParent顶部的距离
2. offsetParent：距离元素最近的一个具有定位的祖宗元素（relative，absolute，fixed），若祖宗都不符合条件，offsetParent为body。如下图所示：

height

和css中的height属性值相同

clientHeight

包括padding但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

scrollHeight

• IE、Opera 认为 scrollHeight 是网页内容实际高度(包括滚动隐藏了的部分)，可以小于 clientHeight
• FF认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

offsetHeight

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

---

鼠标的位置

clientX、clientY

点击位置距离当前body可视区域的x，y坐标

pageX、pageY

对于整个页面来说，包括了被卷去的body部分的长度

screenX、screenY、x、y

点击位置距离当前电脑屏幕的x，y坐标

offsetX、offsetY

相对于带有定位的父盒子的x，y坐标