Updated March 21, 2023
Introduction to jQuery position()
The jQuery position() method used to retrieve the position of the first matched html element. This method is a built-in method of jQuery. This method uses to retrieve the top and left position of the first matched html element relative to its parent element. The top and left position returns as the two properties of an object in pixels.
Syntax:
$(selector).position()This method returns the position of the selected html element.
Examples of jQuery position()
Given below are the examples:
Example #1 – jQuery position() method apply on h1 element
Next, we write the html code to understand the jQuery position() method more clearly with the following example where we apply the position() method to the < h1 >element –
Code:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery position() method </title>
<!-- code to show the jQuery position() working method -->
<script>
$(document).ready(function(){
$("button").click(function(){
var pos = $("h1").position();
alert("Top position is : " + pos.top + " and Left position is : " +
pos.left);
});
});
</script>
</head>
<body>
<h1>This is first heading </h1>
<button> Click here to retrieve the position of the h1 element </button>
</body>The output of the above code is –
Once we press the button, the output is –
In the above code, once we click the button, it executes the position() method on the h1 element, the position() method return the top and left position of the h1 element, which is stored in the pos variable, and further these values are displaying using alert() method, as showing in the above output.
Example #2 – Apply on number of h1 element
Html code to retrieve the different elements’ position using the jQuery position() with the following example where we apply the position() method to the h1 and h2 element.
Code:
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery position() method </title>
<!-- code to show the jQuery position() working method -->
<script>
$(document).ready(function(){
$("button").click(function(){
var pos1 = $("h1").position();
var pos2 = $("h2").position();
alert("Top position is : " + pos1.top + " and Left position is : " +
pos1.left+"\nTop position is : " + pos2.top + " and Left position is : " +
pos2.left );
});
});
</script>
</head>
<body>
<h1>This is first heading </h1>
<h2>This is second heading </h2>
<button> Click here to retrieve the position of the h1 and h2 element </button>
</body>The output of the above code is –
Once we press the button, the output is –
Example #3 – Apply on div element
Html code to apply the position() method on different div elements to retrieve their position relative to its parent, as shown in below code –
Code:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery position() method </title>
<!-- code to show the jQuery position() working method -->
<script>
$(document).ready(function() {
$("div").click(function () {
var pos = $(this).position();
$("#lpos").html("left position : <span>" + pos.left + "</span>.");
$("#tpos").html("top position : <span>" + pos.top + "</span>.");
});
});
</script>
<style>
div { width: 50px; height: 50px; margin: 6px; float: left; }
</style>
</head>
<body>
<p>Click on any square to get its position :</p>
<span id="lpos"></span>
<span id="tpos"></span>
<div style="background-color: red "></div>
<div style="background-color: blue "></div>
<div style="background-color:green "></div>
<div style="background-color:yellow "></div>
</body>
</html>The output of the above code is –
Once we click any square, the output is –
Example #4 – jQuery position() method and jQuery offset() method
Html code to apply both the position () method and offset() method on different div elements to retrieve their position relative to its parent and relative to the documents, as shown in below code –
Code:
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html lang= "en" >
<html>
<head>
<meta charset= "utf-8" >
<script type = "text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" >
</script>
<title> This is an example for jQuery position() method </title>
<!-- code to show the jQuery position() working method -->
<script>
$(document).ready(function() {
$("div").click(function () {
var pos = $(this).position();
$("#lpos").html("left position : <span>" + pos.left + "</span>.");
$("#tpos").html("top position : <span>" + pos.top + "</span>.");
var offs = $(this).offset();
$("#loffs").html("\nleft offset : <span>" + offs.left + "</span>.");
$("#toffs").html("top offset : <span>" + offs.top + "</span>.");
});
});
</script>
<style>
div { width: 50px; height: 50px; margin: 6px; float: left; }
</style>
</head>
<body>
<p>Click on any square to get its position :</p>
<span id="lpos"></span>
<span id="tpos"></span>
<span id="loffs"></span>
<span id="toffs"></span>
<div style="background-color: red "></div>
<div style="background-color: blue "></div>
<div style="background-color:green "></div>
<div style="background-color:yellow "></div>
</body>
</html>The output of the above code is –
Once we click any square, the output is –
Conclusion
This method is used to retrieve the position of the first matched html element. This method uses to return the top and left position in pixel of the first matched html element, which is relative to its parent element.
Recommended Articles
This has been a guide to jQuery position(). Here we discuss the introduction, syntax, and various examples of jQuery position(). you may also have a look at the following articles to learn more –
