原生js中offsetTop, offsetLeft与offsetParent的详细讲解

offsetTop:

offsetTop属性返回一个元素相对于其offsetParent元素的顶部边缘的距离。offsetParent是指离当前元素最近的已经定位（position属性值不是static）的祖先元素。

offsetTop属性的值是一个整数，以像素为单位。如果元素隐藏（display属性的值为none）或者元素的父元素的style属性的visibility属性的值为hidden，则offsetTop属性返回0。

offsetLeft:

offsetLeft属性返回一个元素相对于其offsetParent元素的左边缘的距离。offsetParent是指离当前元素最近的已经定位（position属性值不是static）的祖先元素。

offsetLeft属性的值是一个整数，以像素为单位。如果元素隐藏（display属性的值为none）或者元素的父元素的style属性的visibility属性的值为hidden，则offsetLeft属性返回0。

offsetParent:

offsetParent属性返回一个元素的offsetParent元素。offsetParent是指离当前元素最近的已经定位（position属性值不是static）的祖先元素。

如果一个元素的offsetParent是body元素，则表示该元素是页面中的根元素。

offsetParent属性返回一个元素，如果一个元素没有offsetParent，则返回null。

总结：

offsetTop和offsetLeft属性用于获取一个元素相对于其offsetParent元素的顶部边缘和左边缘的距离。

offsetParent属性用于获取一个元素的offsetParent元素，即离该元素最近的已经定位的祖先元素。