Clienttop,clientleft: element Border width. ClientWidth: element width+ element padding. Offsetwidth: element width+ element padding+ element Border width
Offsetwidth,offsetheight: The visible width and height of the element. It's only about the element itself.
Offsetwidth= (border-width) *2+ (padding-left) + (width) + (padding-right)
offsetheight= (border-width) *2+ (padding-top) + (height) + (padding-bottom)
offsetleft,offsetright: Related to offsetparent
offsetleft= (offsetparent padding-left) + (offsetwidth of the middle element) + (Margin-left of the current element).
offsettop= (offsetparent padding-top) + (offsetheight of the middle element) + (Margin-top of the current element).
The case is special when the offsetparent is body:
In IE8/9/10 and chrome, offsetleft = (body's margin-left) + (body's border-width) + (body's Padding-left) + (Margin-left of the current element).
In Firefox, offsetleft = (body's margin-left) + (body's Padding-left) + (Margin-left of the current element).
OffsetParent:
1. If the parent element of the current element does not have CSS positioning (position is absolute or relative), offsetparent is the body.
2. If there is a CSS anchor in the parent element of the current element (position is absolute or relative), offsetparent takes the nearest parent element.
Understanding of JS offset position width and height