HTML | DOM Style top Property

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <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>

chevron_right


Output: