The jQuery Offset() and jQuery Position() methods are essentially similar. Both methods can be applied to display elements and return an object containing top and left integer coordinate properties. The jQuery Offset() method is different from the jQuery Position() method, although both methods have some similarities. The offset() method retrieves the current position relative to the document, and the position() method retrieves the current position of the element relative to its parent.
Before explaining the differences, let’s first discuss both jQuery methods.
jQuery offset() method
The jQuery offset() method is used to get the current offset of the first matching element into the document. Typically used with drag and drop functionality. The offset() method provides two methods. is for setting or returning the offset coordinates of the selected element relative to the document.
To return the offset: When this method is used to return the offset, it returns the offset co-ordinates of the FIRST matched element.
To set the offset: When this method is used to set the offset, it sets the offset co-ordinates of ALL matched elements.
jQuery position() method
jQuery’s position() method allows you to retrieve the current position of an element relative to its parent element. Returns the position of the first matched element. This method returns an object with two properties: top and left position in pixels. The position() method is more useful when you need to position the new element near another element within the same element that contains the DOM element.
jQuery offset() v/s jQuery position()
| offset() | position() |
|---|---|
| It is relative to the document. | It is relative to the parent. |
| This method is recommended to use when we have to position a new element on top of an already existing element. | It should be used when we have to position a new element near another one. |
| It returns the current position of an element relative to the document. | It returns the current position relative to the parent. |
Example:
This example applies the position() and offset() methods to the specified h2 element to find its position and offset. There are two buttons, Position and Offset, which return the top and left coordinates of the h2 element, respectively. The Position() method returns coordinates relative to the parent document, and the offset() method returns coordinates relative to the document.
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("#b1").click(function(){
var x = $("h1").position();
document.getElementById("p2").innerHTML = "Top = " + x.top + " Left = " + x.left;
});
$("#b2").click(function(){
var y = $("h1").offset();
document.getElementById("p2").innerHTML = "Top = " + y.top + " Left = " + y.left;
});
});
</script>
</head>
<body>
<h1> Welcome to the codeConfig.in </h1>
<p id = "p1"> Click the following buttons to get the position and offset of the above heading. </p>
<button id = "b1"> Position </button>
<button id = "b2"> Offset </button>
<p id = "p2"> </p>
</body>
</html> Output
More on jQuery:
- How to Center a Popup Window on Screen
- How to hide URL in the popup window opened using window.open
- window.showModalDialog is deprecated in Edge and Chrome
- Cloning JavaScript Object with Object.create
- Set new Attribute in XML using jQuery
- DOMParser: parseFromString() method
- What is the use of attr() method in jQuery?
- What is jQuery CDN?
- Difference between $(this) and ‘this’ in jQuery
- jQuery important questions
- Checkbox validation in jQuery
- Difference between offset and position in jQuery?
- How to change the background image using jQuery?
- jQuery Methods
- jQuery Selectors
- jQuery Downloading
- jQuery History