In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > HTML DOM > properties > offsetParent

offsetParent property

Browser support:

Returns a reference to the closest ancestor element in the DOM hierarchy from which the position of the current element is calculated.

Note that the offsetParent element is not always the same as the parentElement in the document hierarchy. If the position style property of an element is set to 'absolute', 'relative' or 'static', then the element is the offsetParent of its child elements.
Use the offsetLeft and offsetTop properties to retrieve the position of the top-left corner of an object relative to the top-left corner of its offset parent object.

Syntax:

object.offsetParent;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Reference to the offset parent element. If the display style property of the current element is set to 'none', then the offsetParent property returns null in Firefox.

Default: this property has no default value.

Example HTML code 1:

This example retrieves the position of an element, relative to the top-left corner of the browser's client area, with the offsetLeft, offsetTop, scrollLeft and scrollTop properties. See the page for the getBoundingClientRect method for similar functionality.

<head>
    <script type="text/javascript">
        function GetOffset (object, offset) {
            if (!object)
                return;
            offset.x += object.offsetLeft;
            offset.y += object.offsetTop;

            GetOffset (object.offsetParent, offset);
        }

        function GetScrolled (object, scrolled) {
            if (!object)
                return;
            scrolled.x += object.scrollLeft;
            scrolled.y += object.scrollTop;

            if (object.tagName.toLowerCase () != "html") {
                GetScrolled (object.parentNode, scrolled);
            }
        }

        function GetTopLeft () {
            var div = document.getElementById ("myDiv");

            var offset = {x : 0, y : 0};
            GetOffset (div, offset);

            var scrolled = {x : 0, y : 0};
            GetScrolled (div.parentNode, scrolled);

            var posX = offset.x - scrolled.x;
            var posY = offset.y - scrolled.y;
            alert ("The top-left corner of the div relative to the top-left corner of the browser's client area: \n" 
                    + " horizontal: " + posX + "px\n vertical: " +  posY + "px");
        }
    </script>
</head>
<body>
    <div style="height:200px; width:300px; overflow:auto;">
        <div id="myDiv" style="width:200px; border:1px solid red;">
            You can get the top-left corner of this element 
            relative to the top left corner of the client area with the button below.<br />
            Use the scrollbars to test it for different positions.
        </div>
        <div style="width:1000px; height:1000px;"></div>
    </div>
    <br />
    <button onclick="GetTopLeft ();">Get the position of the element with red border!</button>
</body>