10

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.

fekiri malek
  • 354
  • 1
  • 3
  • 14
  • 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 Jul 29 '16 at 06:18
  • Note that [`.offsetParent`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) and [`.parentNode`](https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode) will not necessary give the same value. As they are getting difference items depending on the structure of the document. – Spencer Wieczorek Jul 29 '16 at 06: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 Jul 29 '16 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 Jul 29 '16 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 Jul 29 '16 at 10:59
  • @Quentin did you look at the other question's text before marking as duplicate? – Salman A Jul 29 '16 at 11:04
  • i changed the function to show more what is my problem (adding some) : here the original function: – fekiri malek Jul 29 '16 at 11:28
  • var test = function(target, div){ alert(div.parentNode == target.parentNode); // gives true!!! alert(div.offsetParent == target.offsetParent); // gives false!!! } – fekiri malek Jul 29 '16 at 11:28

2 Answers2

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.

Salman A
  • 262,204
  • 82
  • 430
  • 521
4

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

Mattias Åslund
  • 3,877
  • 2
  • 18
  • 17
  • Thank you i suspected that too firstly, but it's not (div == div.offsetParent) returns false. and firebug shows that div.offsetParent is some higher div in my DOM. – fekiri malek Jul 29 '16 at 11:48