/    /  CSS top property

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:

 

CSS top property