Code has been added to clipboard!

jQuery .position(): How to Get the Element Placement

Reading time 1 min
Published Jan 22, 2018
Updated Oct 1, 2019

jQuery position: Main Tips

  • jQuery .position() delivers the position of the first matched element relative to the offset parent.
  • The .offset() method differs form position() in that it makes jQuery get position of element relative to the document.

Usage of .position() Method

The jQuery .position() returns the coordinates of the element position relative to the offset parent. In the example below, this information is shown in an alert that appears upon clicking a button:

Example
$("button").click(() => {
    var coordinate = $("div").position();
    alert("Top: " + coordinate.top + " Left: " + coordinate.left);
});

As you make jQuery get element position, these properties of an element are returned:

  • top: vertical position relatively to the top side of its parent element.
  • left: horizontal position relatively to the left side of its parent element.

The syntax for the .position() jQuery method takes no arguments:

$(selector).position();

Remember: jQuery does not deliver position information of hidden elements.

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 18/04/2021
2287 People Used
Only 92 Left
Rating
5.0