HTML DOM Style top Property

Last Updated : 22 Apr, 2024

The HTML DOM Style top Property is used to set or return the top position of a positioned element including padding, scrollbar, border, and margin.

Syntax:

It returns the top property.

object.style.top

It sets the top property.

object.style.top = "auto | length | % | initial | inherit"

Property Values:

auto – This value automatically sets the default top value by the browser.
length – This value sets the top value in the specified length units. This specified length can be positive as well as negative.
% – Percentage value sets the top value in the specified percentage of the parent element’s width.
initial – This value sets the top property to its browser’s default value.
inherit – This value sets the top property to the value from its parent element.

Return Value: A String, representing the top position of a positioned element.

Example 1: In this example, we will use the HTML DOM Style top Property to set the top position of element.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style top Property
    </title>

    <style>
        #myBtn {
            position: absolute;
        }
    </style>
</head>

<body>
    <h2>
        HTML DOM Style top Property
    </h2>

    <button id="myBtn" onclick="myFunction()">
        Click here!
    </button>

    <script>
        function myFunction() {
            document.getElementById("myBtn")
                .style.top = "100px";
        }
    </script>
</body>

</html>

Output:

HTML-DOM-Style-top-Property

Example 2: In this example, we will use the HTML DOM Style top Property to set the top position of element.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        HTML DOM Style top Property
    </title>

    <style>
        #GfG {
            border: 1px solid black;
            width: 250px;
            text-align: center;
            position: relative;
        }
    </style>
</head>

<body>
    <h2>HTML DOM Style top Property</h2>

    <div id="GfG">Welcome to GeeksforGeeks</div>
    <br>

    <button type="button" onclick="myFunction()">
        Click Here!
    </button>

    <script>
        function myFunction() {
            document.getElementById("GfG").style.top = "-20px";
        }
    </script>
</body>

</html>