185

What is the difference between position() and offset()? I tried to do the following in a click event:

console.info($(this).position(), $(this).offset());

And they seem to return exactly the same... (The clicked element is within a table cell in a table)

Svish
  • 152,914
  • 173
  • 462
  • 620

3 Answers3

225

Whether they're the same depends on context.

  • position returns a {left: x, top: y} object relative to the offset parent

  • offset returns a {left: x, top: y} object relative to the document.

Obviously, if the document is the offset parent, which is often the case, these will be identical. The offset parent is "the closest positioned containing element."

For example, with this document:

 <div style="position: absolute; top: 200; left: 200;">
     <div id="sub"></div>
 </div>

Then the $('#sub').offset() will be {left: 200, top: 200}, but its .position() will be {left: 0, top: 0}.

Bob Stein
  • 16,271
  • 10
  • 88
  • 101
David Hedlund
  • 128,221
  • 31
  • 203
  • 222
  • 2
    So the offset parent is the first parent with position set to absolute? or? – Svish Jul 08 '10 at 09:48
  • 1
    @Svish: whoa, did I really miss the code indent? thaks for the edit. yes, the offset parent is the closest *positioned* parent. that is, an element with position set to absolute, relative or fixed (but not static). this is not a jQuery or even a javascript thing, you have the same behavior in css: if you were to give `sub` absolute positioning to 0:0, then it will be in the top left corner of the offset parent. – David Hedlund Jul 08 '10 at 10:01
  • 1
    FYI, `.position` got updated in 1.12.0 => https://github.com/jquery/jquery/issues/1708 – retrovertigo Jan 25 '16 at 02:40
  • Isn't opposite to the instinctive point of view? This is so arbitrary! For me an absolute "point" is a position. A relative "point" is an offset. – Sandburg Nov 26 '19 at 10:37
30

The .offset() method allows us to retrieve the current position of an element relative to the document. Contrast this with .position(), which retrieves the current position relative to the offset parent. When positioning a new element on top of an existing one for global manipulation (in particular, for implementing drag-and-drop), .offset() is the more useful.

Source: http://api.jquery.com/offset/

jAndy
  • 231,737
  • 57
  • 305
  • 359
  • 3
    As asked above, what is considered the offset parent? It seems that calling position() on the first div inside another div does not always return 0,0 - even when there is no other styling or positioning going on. – Kokodoko Jun 23 '14 at 13:49
  • 2
    jquery.offsetParent(): http://api.jquery.com/offsetparent/ "Get the closest ancestor element that is positioned." – Curtis Yallop Jan 12 '15 at 23:20
-7

Both functions return a plain object with two properties: width & height.

offset() refers to the position relative to the document.

position() refers to the position relative to its parent element

BUT when the object's css position is "absolute" both functions will return width=0 & height=0

dwoutsourcing
  • 127
  • 1
  • 6