The Offsetparent property returns a reference to an object that is closest to the element that called offsetparent (closest to the containing hierarchy) and is a container element that has been positioned in CSS. If the container element does not have CSS positioning, the offsetparent property is referenced to the root element (the HTML element in standard compatibility mode; The body element in the weird rendering mode). When the style.display of the container element is set to "none" (except IE and opera), the offsetparent property returns NULL.
Syntactic:
Parentobj = Element.offsetparent
Variable:
· Parentobj is a reference to an element in which the current element's offset is calculated.
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
test Result:
Firefox3: "BODY"
Internet Explorer 7: "BODY"
Opera 9.51: "BODY"
Chrome 0.2: "BODY"
Safari 3: "BODY
Conclusion:
When an element and its Dom hierarchy are not positioned in CSS (absolute or relative) [or if an element is CSS-positioned When elements in the DOM hierarchy are not positioned in CSS , the offsetparent property of the element is the root element. Rather, the reference to the various offsets of this element (OffsetTop, offsetleft, etc.) is the BODY element. (In fact, both the standard compatibility mode and the weird mode, the root element is the BODY element)
Test Code 2
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
Test results:
Firefox3: "DIV"
Internet Explorer 7: "DIV"
Opera 9.51: "DIV"
Chrome 0.2: "DIV"
Safari 3: "DIV"
Conclusion:
When the parent element of an element is positioned in CSS (absolute or relative), the value of the offsetparent property of the element is its parent element. Rather, the reference to the various offsets of this element (OffsetTop, offsetleft, etc.) is the parent element
Test Code 3
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01//en" "HTTP://WWW.W3.ORG/TR/HTML4/STRICT.DTD" >
Test Results:
Firefox3: "H1"
Internet Explorer 7: "H1"
Opera 9.51: "H1"
Chrome 0.2: "H1"
Safari 3: "H1"
Conclusion:
when an element and its parent are not CSS-positioned (absolute or relative), the element's Offsetparent property is evaluated as being closest to the DOM hierarchy and the element that has been positioned in CSS.
Source: http://www.cnblogs.com/jhxk/articles/1669680.html