Element offsetTop Property
Element ObjectExample
Get the offsetTop position of a <div> element:
<div id="test">
<p>Click the button to get offsetTop for the test
div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p>offsetTop
is: <span id="demo"></span></p>
</div>
<script>
function
myFunction() {
var testDiv = document.getElementById("test");
document.getElementById("demo").innerHTML = testDiv.offsetTop;
}
</script>
Try it yourself »
Definition and Usage
The offsetTop property returns the top position (in pixels) relative to the top of the offsetParent element.
The returned value includes:
- the top position, and margin of the element
- the top padding, scrollbar and border of the offsetParent element
Note: The offsetParent element is the nearest ancestor that has a position other than static.
Tip: To return the left position of an element, use the offsetTop property.
Browser Support
| Property | ||||||
|---|---|---|---|---|---|---|
| offsetTop | Yes | 12.0 | 8.0 | Yes | Yes | Yes |
Syntax
Return the top offset position:
object.offsetTop
Technical Details
| Default Value: | no default value |
|---|---|
| Return Value: | A Number, representing the top position of the element, in pixels |
| DOM Version: | CSSOM |
More Examples
Example
Get the position of a a <div> element:
<div id="test">
<p>Click the button to get the left and top offsets for
the test div.</p>
<p><button onclick="myFunction()">Try it</button></p>
<p id="demo">offsetLeft: <br>offsetTop: </p>
</div>
<script>
function myFunction() {
var testDiv =
document.getElementById("test");
var demoDiv =
document.getElementById("demo");
demoDiv.innerHTML = "offsetLeft:
" + testDiv.offsetLeft + "<br>offsetTop: " + testDiv.offsetTop;
}
</script>
Try it yourself »
