Manipulate Element Coordinates With the jQuery .offset() Method

jQuery offset: Main Tips

• jQuery .offset() returns the coordinates of the first matched element as an object with left and top properties.
• It cannot be used to get the coordinates of elements that are hidden.
• offset jQuery method differs from .position() since it returns element position in relation to the document, not the offset parent.

Using .offset() Method

The jQuery .offset() function returns the coordinates of the first detected element relative to the document. It can also set the coordinates of the selected elements as well.

The example below returns the coordinates of the <p> element:

$("button").click(() => {
    var position = $("p").offset();
    alert("X: " + position.top + " Y: " + position.left);
});

To make jQuery get position coordinates, you don't need any arguments:

$(selector).offset();

Use this syntax to make jQuery set position of elements:

$(selector).offset({top:newValue, left:newValue});

You can use a function returning the coordinates to set for the .offset() jQuery method as well.

Note: when placing an HTML element at the top of an existing page for global manipulation, jQuery .offset() is a better choice than .position().