jQuery: Difference between position() and offset()

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/

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