Latest web development tutorials
 

Element offsetTop Property

< Element Object

Example

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 offsetLeft property.


Browser Support

Property
offsetTop Yes 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 »


< Element Object