Offsetparent algorithm analysis

When calling the offsetparent attribute of ElementAlgorithmReturn element.

If any of the following conditions is true, null is returned and the algorithm is stopped.
A is the root element.
A is the body element of HTML.
The position attribute of Element A is calculated as fixed. Note 1
If a is an HTML element area and has an HTML element map in its parent Element Chain, return the HTML element map closest to a in the parent Element Chain and stop this algorithm. Note 2
If any of the following conditions is true, the upper-level element closest to a that meets the following conditions is returned and the algorithm is stopped.
The position attribute of the upper-level element is not calculated as static. Note 3
The upper-level element is the html body element. Note 4
The position attribute of a is calculated as static, and the parent element is TD, Th, or table.
Returns null.
As mentioned above, the content of the work draft is not necessarily the same as that of the current browser. The notes are as follows:

Note 1 Firefox does not apply; IE 6 does not apply; doctype does not apply when IE 7 does not support fixed (hereinafter referred to as IE 6 mode ).
Note 2 Firefox does not apply.
Note 3 The position attribute of the parent element is calculated as fixed, and the IE 6 or IE 6 mode is not applicable.
Note 4 in IE 7 mode, if the position attribute of an element is calculated as absolute or relative, the element HTML is returned instead of the body.
Summary

From this we can see that offsetparent has different algorithms in different browsers and versions in different modes of the same version, which is a little troublesome. We recommend that you use offsetparent loop, offsetleft, and offsettop to obtain the absolute position of the control in the browser.

but fortunately, there is a common layout in various browsers where offsetparent is the same, that is, when the position of the outer element div is calculated as relative and absolute, the offsetparent of the inner element div is always the outer element Div.