Analysis of jsoffsetTop and offsetLeft instances

OffsetTop: return the distance between the upper border of the element and the upper border of the offsetParent element in CSS pixels. OffsetLeft: return the left position of an element in CSS pixels relative to the layout or the parent coordinate specified by the offsetParent attribute. OffsetTop: return the distance between the upper border of the element and the upper border of the offsetParent element in CSS pixels.
OffsetLeft: return the left position of an element in CSS pixels relative to the layout or the parent coordinate specified by the offsetParent attribute.

The most important thing here is to find the offsetParent.
In fact, it is very simple. For example, to calculate the offsetTop of Element A, first find the offsetParent of Element A. The offsetParent of Element A should be the parent element closest to element, the parent element has the position: relative or absolute attribute. If no parent element is matched, the window-based offsetTop of the element should be calculated.

The following is an example:

  
X Box
OffsetTop