Easy Tutorial
❮ Jsref Tutorial Dom Obj Ol ❯

top Property


Definition and Usage

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

This property specifies the top position of the element, including padding, scrollbars, borders, and margins.

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

Syntax

Set the top property:

Return the top property:

Value Description
auto Default. The top position is calculated by the browser.
length Defines the top edge of the element in px, cm, etc., relative to the top edge of the nearest positioned parent element. Negative values are allowed.
% Defines the top edge of the element as a percentage relative to the top edge of the nearest positioned parent element.
inherit The top property is inherited from the parent element.

Browser Support

All major browsers support the top property.

Note: IE7 and earlier versions do not support the "inherit" value. IE8 requires a !DOCTYPE to support "inherit". IE9 supports "inherit".


Example

Set the top position of a button:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>tutorialpro.org(tutorialpro.org)</title> 
<style type="text/css">
#b1{
    position:absolute;
}
</style>
<script>
function displayResult(){
    document.getElementById("b1").style.top="100px";
}
</script>
</head>
<body>

<input type="button" id="b1" onclick="displayResult()" value="Set top position to 100px">

</body>
</html>

❮ Jsref Tutorial Dom Obj Ol ❯