top
Description
top defines the offset to the top outer margin edge of a positioned element.
| Item | Value |
|---|---|
| Initial value | auto |
| Inherited | No. |
| Version | CSS2 |
| JavaScript syntax | object.style.top="50px" |
| Applies to | Positioned elements (not static positioned). |
Syntax and Property Values
top: length | percentage | auto | inherit
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 |
Example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {<!-- w w w .j av a 2s . c o 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>
The code above generates the following result.
