图文记录 offsetTop - clientTop - scrollTopoffsetTop 通俗来说：该元素外边框，

offsetTop

MDN：它返回当前元素相对于其 offsetParent 元素的顶部内边距的距离。

通俗来说：该元素外边框到offsetParent元素内边框的距离。

<body>
    <div class="b-parent">
        <div class="basic">hi</div>
    </div>
</body>

<style>
    *{ margin: 0; padding: 0; }
    .b-parent{
        display: inline-block;
        padding: 40px;
        border: 50px solid #333;
        margin: 60px;
    }
    .basic{
        width: 30px;
        height: 30px;
        background-color: #999;
        padding: 10px;
        border: 20px solid #666;
        margin: 30px;
    }
</style>

可以发现当前元素的 offsetParent 是祖父元素

元素外边框到 offsetParent 的内边框也正好是 180

但是为什么 parentNode 和 offsetParent 不一样呢

offsetParent

MDN：HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。

通俗来说：offsetParent 指向最近的一个有定位属性的父级元素，直到找到 table\td\th\body 元素为止。display为none的元素, offsetParent = null。

比如，将parentNode添加一个positon，那么它就变成了offsetParent。

比如，给自己设置 display: none;后，offsetParent变成了null,offsetTop变成了0。

clientTop

MDN：一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。clientTop 是只读的。

通俗来说：就是该元素上边框的厚度

scrollTop

MDN：一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。