CSS Property top
top defines the offset to the top outer margin edge of a positioned element.
Summary
| Item | Value |
|---|---|
| Initial value | auto |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.top="50px" |
| Applies to | Positioned elements (not static positioned). |
CSS Syntax
top: length | percentage | auto | inherit
Property Values
The property values are listed in the following table.
| Value | Description |
|---|---|
| auto | Default value. The browser does the calculation. |
| length | Set width in px, cm, etc. |
| % | Set width in percent of the containing element |
| inherit | Inherit the width property from the parent element |
Browser compatibility
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
top |
Yes | Yes | Yes | Yes | Yes |
Example
An example showing how to use top CSS property.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!-- www .j a v a 2 s. co m-->
font: 12px sans-serif;
background: lightyellow;
}
div#offset-four {
background: yellow;
border: 1px solid rgb(128, 128, 128);
position: absolute;
top: 20px;
right: 20px;
bottom: 20px;
left: 20px;
}
p {
margin: 0;
padding: 5px;
border: 1px solid black;
}
p#offset-y {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
width: 100px;
background: khaki;
}
</style>
</head>
<body>
<div id='offset-four'>
<p id='offset-y'>
When the top and bottom offset
properties are applied to the same
element, height is implied.
</p>
</div>
</body>
</html>