Javascript DOM CSS Style top Property

Introduction

Set the top position of a <button> element: 

document.getElementById("myBtn").style.top = "100px";

View in separate window 

<!DOCTYPE html>
<html>
<head>
<style>
#myBtn {//from   w  w  w .  ja  v  a2 s . c  om
  position: absolute;
}
</style>
</head>
<body>

<button type="button" id="myBtn" onclick="myFunction()">Set top position to 100 px</button>

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

</body>
</html>

The top property sets or gets the top position of a positioned element.

This property specifies the top position of the element including padding, scrollbar, border and margin.

A positioned element is an element with the position property set to: relative, absolute, or fixed.

Property Values

Value Description
autoLets the browser set the top position. default
length Defines the top position in length units. Negative values are allowed
% Sets the top position in % of the height of the parent element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.

The top property returns a String representing the top position of a positioned element.




PreviousNext

Related