jQuery: Difference between position() and offset()

Question

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)

Answer 1

That depends on what context the element is in. position returns the position relative to the offset parent, and offset does the same relative to the document. Obviously, if the document is the offset parent, which is often the case, these will be identical.

If you have a layout like this, however:

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

Then the offset for sub will be 200:200, but its position will be 0:0.

Answer 2

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/

Answer 3

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