jquery
  1. jquery-position
PreviousNext

jQuery position()

The jQuery position() method allows you to retrieve the current position of an element relative to its parent container.

Syntax

The syntax for using the position() method is as follows:

$(selector).position()

where selector is the element whose position you want to retrieve.

Use

The position() method is useful when you need to accurately position elements relative to their parent container. This is particularly helpful when working with nested elements or complex layouts.

Example

Suppose we have the following HTML:

<div id="parent">
  <div id="child">Hello World!</div>
</div>

To get the position of the child element relative to the parent element, we can use the following jQuery code:

var position = $('#child').position();
console.log(position.top);
console.log(position.left);


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery AJAX POST Example</title>
    <!-- Include jQuery library -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

 <div id="parent">
  <div id="child">Hello World!</div>
</div>

    <script>
var position = $('#child').position();
console.log(position.top);
console.log(position.left);
    </script>
</body>
</html>
Try Playground

This will log the top and left positions of the child element within the parent element to the console.

Summary

The position() method in jQuery provides an easy way to retrieve the position of an element relative to its parent container. This can be particularly useful when working with complex layouts and nested elements. By using the position() method in conjunction with other jQuery methods and properties, you can create dynamic and responsive web pages with ease.

offset()addClass()
Published on: