- First: this reference element is one of the ancestors of the current element.
- Second: the CSS position property of the reference element is set to any value other than “static”.
The offsetParent property is read-only and so can’t assign a value to it.
The return value of this method, as mentioned before, is the closest element in the string of ancestors that has its position property set to a value other than “static”.
Note: the value of the offsetParent property might become null for the following reasons:
- If the display property for the current element or its parent is set to none.
- If the current element (the one that invoked the property) has the position property with the value fixed. (In a situation like this, the Firefox browser returns a reference to the <body> element).
- If the current element is either <body> or <HTML> element.
In this example, the position property of the <ol> element is set to fixed. Now, via the third item of this list and using the offsetParent property, we want to get a reference to the closest ancestor that is positioned at something other than “static” value. So here after calling this property, we got a reference to the <ol> element because this element’s position property is set to “fixed”.
That’s how we got a reference to the <ol> element.