Some of the positioning properties in JavaScript [Illustrated]_ Basics

It's enough to have this picture, simply to explain

In height, for example, width is the same:

Div.clientheight: The visible window removes the length after margin+border.
Div.offsetheight: The length of the border and scrollbars are added on the div.clientheight basis.
Div.scrollheight: is the actual height of the element content.
For top, for example, left is the same:

The length value before padding after div.clientTop:margin.
Div.offsettop: The vertical distance from the top edge of the border to the upper border inner edge of the element's offsetparent.
Div.scrolltop: The distance from the top of the object to the topmost edge of the object in the range displayed by the current window, that is, the distance the scroll bar pulls when the vertical scroll bar appears.
About offsetparent, different browsers have different implementation algorithms, there is a common layout in various browsers offsetparent is the same, that is: the outer element div position calculated value is relative, absolute, the inner element The offsetparent of the DIV is always the outer element div.