几个Demo带你理清offsetLeft和offsetTop

前言

最近做项目或者前面的视频播放器，会很经常接触到offsetLeft和offsetTop,用的时候还是有点迷迷糊糊，所以今天做几个demo彻底理清下这两个到底根据的是谁来计算距离

一.offsetLeft和offsetTop是什么？

在MDN文档搜索下得到：HTMLElement.offsetLeft和HTMLElement.offsetTop是一个只读属性，返回当前元素左上角相对于HTMLElement.offsetParent节点的左内边界偏移的像素值。

这里又牵扯到一个新概念：offsetParent，这又是什么呢？

二.offsetParent是什么？

MDN文档搜索得知HTMLElement.offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,td,th,body元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft都是相对于其内边距边界的。

几个Demo带你理清offsetLeft和offsetTop

原文：https://www.cnblogs.com/zjzpg/p/13683846.html