Menu
jQuery offset() Method The offset() method set or returns the offset coordinates for the selected elements, relative to the document. When used to return the offset: This method returns the offset coordinates of the FIRST matched element. It returns an object with 2 properties; the top and left positions in pixels.
An offset involves assuming an opposite position in relation to an original opening position in the securities markets. For example, if you are long 100 shares of XYZ, selling 100 shares of XYZ would be the offsetting position.
jQuery position() Method The position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.
Definition and Usage The offsetTop property returns the top position (in pixels) relative to the parent. The returned value includes: the top position, and margin of the element. the top padding, scrollbar and border of the parent.
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}.
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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With