two divs have same parentNode but different offsetParent

Question

I call this function with two elements having the same parentNode:

var test = function(target, div){
     alert(div.parentNode == target.parentNode );    // gives true
     alert(div.offsetParent == target.offsetParent); // gives true
     div.setAttribute("style", "position:relative; float:left; height:" + target.offsetHeight + "px;");
     alert(div.parentNode == target.parentNode);     // gives true
     alert(div.offsetParent == target.offsetParent); // gives false!!!
}

As you can see that both elements have same parent, which means they are inside same branch of the DOM tree, how come they have different offsetParent?

I notice here that div has relative position, which seems to be the reason because when I remove it both alerts give true. (but normally the position of an element should not affect its offsetParent)

/* I have edited the function after some more invistigation it should show more where lies the problem */ I got the same results on FF and Chrome. parentNode of both elements is a table-td

Thank you for answering.

Answer 1

Just because both properties contain the word "parent" does not mean they are similar.

• The offsetParent property returns the closest element in the ancestors hierarchy that is positioned.
• The parentNode property simply returns the immediate parent element.

Now, if two elements are siblings (as in your example) then their offset parents should be same. However, it is possible for an element to return null instead of offset parent, for example:

• When the element is display: none
• When the element is position: fixed

Edit: your example involves a td element so the offset parent is calculated in a weird manner. Inside a td element:

• Non-positioned elements will have that td element as their offset parent. This means target.offsetParent will be that td.
• For positioned elements the normal rules apply. This means the div.offsetParent will be body since div is positioned.

The simplest workaround to make both elements have same offset parent is to add position: relative on the table cell.