JS Offsetparent,offsetleft,offsettop and jquery's offset (), position () comparison

1, OffsetParent

The element's offsetparent is not the parent element of the element, and the offsetparent of the element is determined by the following conditions:

1) When the elements in the DOM hierarchy are not positioned in CSS (set position to absolute or relative), the offsetparent is the root directory;

2) When the parent element of the element is not positioned as a CSS, the offsetparent takes the nearest positioned element;

3) When the parent element of the element is positioned in CSS, the offsetparent is the parent element;

2, Offsetleft,offsettop

In IE: the parent element is always offset by the reference object, and the offset is added to the parent element's border value.

In non-ie: offsets the Reference object with the most recent non-static anchor element.

3. jquery's offset () and position ()

Offset (): is used to calculate the absolute offset, gets the relative offset of the element in the current window, the reference object is body.

Position (): is the element used to calculate the relative offset, the reference object is the most recent non-static location.

Therefore, if the current element's ancestor element position attribute value is not defined as absolute,relative,fixed, then the current element's nearest parent anchor element should be the body element, at which point the relative offset position and the absolute offset position are the same.

JS Offsetparent,offsetleft,offsettop and jquery's offset (), position () comparison