jQuery: Difference between position() and offset()

jquery, positioning

Solution

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

Problem

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)

Original source