The top property in the HTML DOM is used to get or set the vertical position of positioned element. It specifies the distance between the element's top edge and the top edge of its containing block. The property works with the CSS positioning values such as relative, absolute, sticky & fixed.
Syntax
// Get the top position
element.style.top;
// Set the top position
element.style.top = "20px";
The top property returns or sets the inline top-position value of an element.
Property Values:
- auto - Lets the browser determine the top position.
- length - Sets the top position using positive or negative length values.
- Percentage - Sets the top position as a percentage of the containing block’s height.
- initial - Resets the property to its initial value.
- inherit - Inherits the value from the parent element.
Example: Changing the Top Position Using Top
The following example changes the vertical position of a box when the button is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML DOM Style top Property</title>
<style>
body {
font-family: Arial, sans-serif;
background: #f4f7f6;
text-align: center;
padding: 30px;
}
.container {
position: relative;
height: 220px;
max-width: 450px;
margin: 20px auto;
background: white;
border: 1px solid #ddd;
border-radius: 10px;
}
#demo {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
padding: 15px;
background: #d1e7dd;
color: #146c43;
border-radius: 6px;
transition: top 0.3s;
}
button {
padding: 10px 18px;
background: #198754;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>HTML DOM Style top Property</h2>
<div class="container">
<div id="demo">Positioned Box</div>
</div>
<button onclick="changePosition()">Change Position</button>
<script>
function changePosition() {
document.getElementById("demo").style.top = "100px";
}
</script>
</body>
</html>
