HTML | DOM offsetTop Property

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 pixel unit which is repersent the top position of element.
  • Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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() {
                var x = document.getElementById("offsetdiv");
                document.getElementById("gfg").innerHTML =
                 offsetdiv.offsetTop;
            }
        </script>
      
    </body>
      
    </html>

    chevron_right

    
    

    Output:
    Before clicking on the button:

    After clicking on the button:

    Supported Browsers:

    • Google Chrome
    • Internet Explorer 4.0
    • Firefox
    • Opera
    • Safari


    My Personal Notes arrow_drop_up

    Check out this Author's contributed articles.

    If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

    Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.