jQuery: Difference between position() and offset()

jquery positioning
Svish picture Svish · Jul 8, 2010 · Viewed 96.3k times · Source

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

David Hedlund picture David Hedlund · Jul 8, 2010

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

Related questions

How can I make a div stick to the top of the screen once it's been scrolled to?

I would like to create a div, that is situated beneath a block of content but that once the page has been scrolled enough to contact its top boundary, becomes fixed in place and scrolls with the page.

Read More
In jQuery how can I set "top,left" properties of an element with position values relative to the parent and not the document?

.offset([coordinates]) method set the coordinates of an element but only relative to the document. Then how can I set coordinates of an element but relative to the parent? I found that .position() method get only "top,left" values relative …

Read More
Stopping fixed position scrolling at a certain point?

I have an element that is position:fixed and so scrolls with the page how i want it to however. when the user scrolls up I want the element to stop scrolling at a certain point, say when it is 250…

Read More