offsetParent() Method

Syntax

$(selector).offsetParent()

Description

The .offsetParent() method traverses along the DOM tree and searches through the ancestors of the selected element and construct a new jQuery object wrapped around the closest positioned ancestor. The DOM element's position can be positioned using the CSS position attributes such as relative, absolute, or fixed. This method is useful to calculate the offsets for performing animations and placing objects on the page.

Here is a brief example code on how to use the jQuery offsetParent() method.

Example Code

<script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ $("#p1").click(function(){ $("#p1").offsetParent().css("background-color", "green"); }); }); </script> <div><br><div style="border:1px solid black;position:absolute;left:10px;top:50px"> <div style="border:1px solid black;margin:50px;background-color:yellow"> <p id='p1'>Click Mouse Once Here</p> </div> </div>