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: