关于offset共有5个东西需要弄清楚：
1、offsetParent
2、offsetTop
3、offsetLeft
4、offsetWidth
5、offsetHeight
（1）offsetWidth也就是元素的可视宽度，这个宽度包括元素的边框(border)，水平padding，垂直滚动条宽度，元素本身宽度等。
offsetHeight跟offsetWidth类似，只是方向改为垂直方向上的。
经过测试可以发现，即使元素加上水平或垂直滚动条，offsetWidth跟offsetHeight的值是不会更改的，因为浏览器渲染时把滚动条的宽度（或高度）算在了元素本身的宽度（或高度）中了。
我们不难看出:
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
（2）offsetLeft与offsetTop却不是这样，这两个属性与offsetParent有关
offsetLeft也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。从这个定义中我们可以明确地知道offsetLeft与当前元素的margin-left和offsetParent的padding-left有关。
offsetTop也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的垂直偏移量。
（3）offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素的引用。
总的来说两条规则：
1、如果当前元素的祖先元素没有进行CSS定位（position为absolute或relative），offsetParent为body。
2、如果当前元素的祖先元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。