jQuery Tutorial
jQuery Effects
jQuery HTML/CSS
jQuery Form
- jquery-serialize()
- jquery-serializearray()
jQuery Events
jQuery Misc
jQuery Questions
Miscellaneous
- jquery-vs-angularjs
jQuery MCQ
- jquery-mcq
jQuery UI
- 50+-jquery-ui
Interview Questions
- jquery-questions

jQuery offsetParent() method

The offsetParent() method in jQuery is used to return the closest positioned ancestor element. The element can be positioned with jQuery or by using the CSS position property (absolute, relative, or fixed).

Syntax

The offsetParent() method does not accepts any arguments.

Let's see an illustration to understand the working of the offsetParent() method.

Example

It is a simple example of using the offsetParent() method. In this example, there is a div element that contains a relatively positioned heading h5 and a paragraph element. We are using the offsetParent() method to get the first positioned parent of the p element. The heading h5 is the first positioned parent of the p element. So, on clicking the given button, the background color of the first positioned parent of p, which is heading h5, will get changed.

<!DOCTYPE html>
<html>
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script> 
<style>
div, #p1{
 border: 2px solid blue;
 }
h5{
border: 2px solid red;
position: relative;
}
</style>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $("#p1").offsetParent().css( "background-color", "lightgreen" );
    });
});
</script>
</head>
<body>
<h3> It is an example of using the offsetParent() method. </h3>
<div> div
<h5> h5 heading element
<p id = "p1"> On clicking the button, the background color of the first positioned parent element of this paragraph will be changed. </p>
</h5>
</div>
<p> Click the following button to see the effect. </p>
<button> Click me </button>
</body>
</html>

Test it Now

Output

After the execution of the above code, the output will be -