CSS top property
Top CSS property specifies an offset for the top edge of the positioned element, relative to the top edge of the reference element’s box/browser window.
Absolutely: Top property specifies how far the top edge of the element’s box(browser window) is offset below the top edge of its containing block.
Relatively: Top property specifies the offset with respect to the top edge of the box itself.
Syntax:
top: auto | length | percentage | initial | inherit;
Property Values:
- auto : Browser to calculate the top edge position.
- length: The position of top property in px, cm, pt, etc.
- percentage: The height of the element’s containing block.
- initial: The property to its default value.
- inherit: The property from its parent element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS top property</title>
<style>
p {
width: 200px;
position: absolute;
top: 150px;
padding: 20px;
font: bold 18px sans-serif;
background: green;
color:white;
}
</style>
</head>
<body>
<p>The top property value to see how it works.</p>
</body>
</html>
OUTPUT:
