javascript - two divs have same parentNode but different offsetParent - Stack Overflow

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 e 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.

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 e 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.

• javascript
• html
• css

Share Follow edited Jul 29, 2016 at 11:41 fekiri malek asked Jul 29, 2016 at 6:15 fekiri malekfekiri malek 37611 gold badge33 silver badges1414 bronze badges 8

• 3 "i see downvoting people here more than actual repliers" - Because there are many low quality questions that do not give enough information to actually produce an answer. Or the questioner did not attempt to even google their question. – Spencer Wieczorek Commented Jul 29, 2016 at 6:18
• Note that .offsetParent and .parentNode will not necessary give the same value. As they are getting difference items depending on the structure of the document. – Spencer Wieczorek Commented Jul 29, 2016 at 6:24
• 1 Second if you give time and focus on the question you will see that both elements have same parentNode (what ever the document structure is) so they belong to same branch of div and somehwere up in that branch ancestors there is positioned element that would be the offsetParent (i should be the same for both divs) – fekiri malek Commented Jul 29, 2016 at 10:45
• third there could be low quality answers but there is not low quality questions... a question supposes we don't know something and we ask about it. it's meaningless to say a question is of low quality (as a good teacher told us once there is no stupid (here you call it low quality) questions.. – fekiri malek Commented Jul 29, 2016 at 10:48
• @fekirimalek — You are conflating "stupid" with "low quality" and treating Colin Powell's quote as a universal truth instead of taking it in the context in which it was used. – Quentin Commented Jul 29, 2016 at 10:59

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 5

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.

offsetParent is the closest parent that has position, so when the div has position itself it is its own offsetParent.