Offset,Client,Scroll,Height,Top 一些距离参数的图示和解释

先上一张神图



按上右下左的顺序来：

1.clientTop,clientLeft

等于borderTop,borderLeft，就是border的宽度

2.ScrollTop,ScrollLeft

padding+border宽度+已滚动的高度/宽度



3.OffsetTop，OffsetLeft

offsetTop returns
the distance of the current element relative to the top of the 

offsetParent

 node.

OffsetTop返回当前元素相对OffsetParent节点顶部的距离

offsetParent returns
a reference to the object which is the closest (nearest in the containment hierarchy) positioned containing element. If the element is non-positioned, the nearest table cell or root element (

html

 in
standards compliant mode; 

body

 in
quirks rendering mode) is the offsetParent. offsetParent returns
null when the element has 

style.display

 set
to "none". TheoffsetParent is
useful because offsetTop and offsetLeft are
relative to its padding edge.

OffsetParents返回一个离object最近的确定位置的包含元素的引用