{"name":"offsetParent","type":"method","title":".offsetParent()","deprecated":null,"removed":null,"desc":"Get the closest ancestor element that is positioned.","categories":["offset","traversing/tree-traversal"],"entries":[{"return":"jQuery","signatures":{"added":"1.2.6"},"examples":{"desc":"Find the offsetParent of item \"A.\"","height":"250","code":"$( \"li.item-a\" ).offsetParent().css( \"background-color\", \"red\" );","html":"\n<ul class=\"level-1\">\n  <li class=\"item-i\">I</li>\n  <li class=\"item-ii\" style=\"position: relative;\">II\n    <ul class=\"level-2\">\n      <li class=\"item-a\">A</li>\n      <li class=\"item-b\">B\n        <ul class=\"level-3\">\n          <li class=\"item-1\">1</li>\n          <li class=\"item-2\">2</li>\n          <li class=\"item-3\">3</li>\n        </ul>\n      </li>\n      <li class=\"item-c\">C</li>\n    </ul>\n  </li>\n  <li class=\"item-iii\">III</li>\n</ul>\n"},"longdesc":"\n    <p>Given a jQuery object that represents a set of DOM elements, the <code>.offsetParent()</code> method allows us to search through the ancestors of these elements in the DOM tree and construct a new jQuery object wrapped around the closest positioned ancestor. An element is said to be positioned if it has a CSS position attribute of <code>relative</code>, <code>absolute</code>, or <code>fixed</code>. This information is useful for calculating offsets for performing animations and placing objects on the page.</p>\n    <p>Consider a page with a basic nested list on it, with a positioned element:</p>\n    <pre><code>\n&lt;ul class=\"level-1\"&gt;\n  &lt;li class=\"item-i\"&gt;I&lt;/li&gt;\n  &lt;li class=\"item-ii\" style=\"position: relative;\"&gt;II\n    &lt;ul class=\"level-2\"&gt;\n      &lt;li class=\"item-a\"&gt;A&lt;/li&gt;\n      &lt;li class=\"item-b\"&gt;B\n        &lt;ul class=\"level-3\"&gt;\n          &lt;li class=\"item-1\"&gt;1&lt;/li&gt;\n          &lt;li class=\"item-2\"&gt;2&lt;/li&gt;\n          &lt;li class=\"item-3\"&gt;3&lt;/li&gt;\n        &lt;/ul&gt;\n      &lt;/li&gt;\n      &lt;li class=\"item-c\"&gt;C&lt;/li&gt;\n    &lt;/ul&gt;\n  &lt;/li&gt;\n  &lt;li class=\"item-iii\"&gt;III&lt;/li&gt;\n&lt;/ul&gt;\n    </code></pre>\n    <p>If we begin at item A, we can find its positioned ancestor:</p>\n    <pre><code>\n$( \"li.item-a\" ).offsetParent().css( \"background-color\", \"red\" );\n    </code></pre>\n    <p>This will change the color of list item II, which is positioned.</p>\n  "}]}