HTML DOM offsetTop Property

Last Updated : 13 Jun, 2023

The DOM offsetTop property is used to return the top position which is relative to the top of the offsetParent element.

Syntax:

object.offsetTop

Return Value: A number in the pixel unit represents the top position of the element.

Example: In this example, we will use DOM offsetTop property

HTML

<!DOCTYPE html>
<html>
<head>
    <style>
        #offsetdiv {
            top: 80px;
            margin: 20px;
            padding: 10px;
            width: 350px;
            position: absolute;
            border: 5px solid green
        }
    </style>
</head>
<body>
    <h3>Geeks for Geeks</h3>
    <h3>HTML DOM offsetTop property</h3>
    <div id="offsetdiv">
        <p>
            <button onclick="GFGfunction()">Try it</button>
        </p>
        <p>offsetTop is: <span id="gfg"></span></p>
    </div>
    <script>
        function GFGfunction() {
            let x = document.getElementById("offsetdiv");
            document.getElementById("gfg").innerHTML =
                offsetdiv.offsetTop;
        }
    </script>
</body>
</html>