A detailed explanation of offsetTop, offsetLeft, and offsetParent in native JavaScript

Vertical distance of the element’s top edge from the top edge of the nearest relatively positioned parent element.

The offsetTop property returns the distance between the top edge of an element and its closest positioned ancestor element, which is the offsetParent.

The value of the offsetTop property is an integer, measured in pixels. If the element is hidden (display property set to none) or if the visibility property of the element’s parent element is set to hidden, the offsetTop property will return 0.

Horizontal position from the left side

The offsetLeft property returns the distance from the left edge of an element to its offsetParent element. The offsetParent refers to the closest ancestor element that is already positioned (position property value is not static).

The value of the offsetLeft property is an integer, in pixels. If the element is hidden (display property set to none) or the parent element’s visibility property in the style attribute is set to hidden, the offsetLeft property will return 0.

parent element:

The offsetParent property returns the closest ancestor element of an element that is already positioned (position property value is not static).

If an element’s offsetParent is the body element, it means that the element is the root element on the page.

The offsetParent property returns an element, or null if an element does not have an offsetParent.

In conclusion,

The offsetTop and offsetLeft attributes are used to retrieve the distance between the top and left edges of an element relative to its offsetParent element.

The offsetParent property is used to retrieve the closest positioned ancestor element of an element.