offsetParent algorithm analysis_basic knowledge

When calling the offsetParent property of element A, the element must be returned according to the following algorithm.

When any of the following conditions is true, return null and stop the algorithm.
A is the root element.
A is the HTML body element.
The calculated value of the position attribute of element A is fixed. Note 1
If A is an HTML element area, and there is an HTML element map in its superior element chain, return the HTML element map closest to A in the superior element chain, and stop this algorithm. Note 2
If any of the following conditions is true, return the nearest superior element to A that meets the following conditions and stop this algorithm.
The calculated value of the position attribute of the parent element is not static. Note 3
The parent element is the HTML body element. Note 4 The calculated value of the position attribute of
A is static, and the superior element is td, th or table.
Return null.
As mentioned earlier, the above is the content of the working draft, so it is not necessarily consistent with current browsers. The notes are as follows:

Note 1 Firefox is not applicable; IE 6 is not applicable; DOCTYPE makes IE 7 not applicable Not applicable when fixed is supported (hereinafter referred to as IE 6 mode).
Note 2 Not available for Firefox.
Note 3 The calculated value of the position attribute of the parent element is fixed, and it is not applicable in IE 6 or IE 6 mode.
Note 4 In IE 7 mode, if the calculated value of the element's position attribute is absolute or relative, the element HTML is returned instead of BODY.
Summary

It can be seen that there are different algorithms for obtaining offsetParent in each browser, in each version of each browser, and in different modes of the same version, which is really troublesome. Therefore, it is recommended to understand it as obtaining the absolute position of the control in the browser through the offsetParent loop and offsetLeft and offsetTop.

But fortunately there is a common layout with the same offsetParent in various browsers, that is: when the calculated position value of the outer element div is relative or absolute, the offsetParent of the inner element div is always The outer element div.