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

Difference between offset and position in jQuery?

More on jQuery:

Leave a Reply

Your email address will not be published. Required fields are marked *

Explore More

How to Center a Popup Window on Screen

0 Comments 0 tags

JavaScript window.open() method is used to open a popup window. This popup window will be placed in the center of the screen. This example creates the pop-up window without placing it into

How to hide URL in the popup window opened using window.open

0 Comments 0 tags

If you are using below code to open a popup window in your web page, then address must be appearing in you pop up window and f you want to

window.showModalDialog is deprecated in Edge and Chrome

0 Comments 0 tags

If you have a website being compatible with Edge/Chrome and in past it was only compatible with IE 11 and if you are using window.showModalDailog in your JavaScript code, then