Some positioning attributes in JavaScript [Illustration]_Basic knowledge

This picture is enough, let me explain briefly

Take Height as an example, Width is the same:

div.clientHeight: after the visible window has removed the margin border length.
div.offsetHeight: Based on div.clientHeight, the length of border and scroll bar is added.
div.scrollHeight: It is the actual height of the element content.
Take Top as an example, the same applies to Left:

div.clientTop: the length value after margin and before padding.
div.offsetTop: The vertical distance from the upper edge of the element's upper border to the inner edge of the element's offsetParent's upper border.
div.scrollTop: The distance from the top of the object to the top edge of the object within the display range of the current window, that is, the distance the scroll bar is pulled when a vertical scroll bar appears.
Regarding offsetParent, different browsers have different implementation algorithms. There is a common layout in which offsetParent is the same in various browsers, that is: when the calculated position value of the outer element div is relative or absolute, the inner layer The offsetParent of an element div is always the outer element div.