HTML | DOM Style top Property

Last Updated : 05 Jun, 2022

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

Syntax:

It is used to return the top property:

object.style.top

It is used to set the top property:

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

Property Value Description:

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:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style top Property
    </title>
    <style>
        #myBtn {
            position: absolute;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
 
    <h2>
        HTML DOM Style top Property
    </h2>
 
    <button type="button" id="myBtn"
            onclick="myFunction()">Click here!
    </button>
 
    <script>
        function myFunction() {
            document.getElementById("myBtn")
            .style.top = "200px";
        }
    </script>
 
</body>
 
</html>

Output:

Before Click on the button:
After Click on the button (Note that click here button moved down): Example 2:

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML | DOM Style top Property
    </title>
    <style>
        #GfG {
            border: 1px solid #FF0000;
            position: relative;
        }
    </style>
</head>
 
<body>
 
    <h1> HTML|DOM Style top Property</h2>
 
    <div id="GfG">Welcome to Geeks for Geeks.</div>
    <br>
 
    <button type="button" onclick="myFunction()">
      Click Here!
    </button>
 
    <script>
function myFunction() {
  document.getElementById("GfG")
  .style.top = "-20px";
}
</script>
 
</body>
</html>