The DOM offsetTop property is used to return the top position which is relative to the top of the offsetParent element.
Syntax
object.offsetTopReturn Value: A number in the pixel unit represents the top position of the element.
Example: In this example, we will use DOM offsetTop property
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<style>
#offsetdiv {
top: 80px;
margin: 20px;
padding: 10px;
width: 350px;
position: absolute;
border: 5px solid green
}
</style>
</head>
<body>
<h3>Geeks for Geeks</h3>
<h3>HTML DOM offsetTop property</h3>
<div id="offsetdiv">
<!--Driver Code Ends-->
<p>
<button onclick="GFGfunction()">Try it</button>
</p>
<p>offsetTop is: <span id="gfg"></span></p>
</div>
<script>
function GFGfunction() {
let x = document.getElementById("offsetdiv");
document.getElementById("gfg").innerHTML =
offsetdiv.offsetTop;
}
</script>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
- It returns the vertical distance (in pixels) from the top border edge of the element to the top padding edge of its offsetParent.
- It ignores CSS transforms and always returns an integer value based on the layout box.
