Top

The CSS top property defines the top position of an element in combination with the position property.

When the position property is set to static, the top property do not apply.

CSS Syntax

top: auto | length | initial | inherit;

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
	   div{
      	   	background-color:orange;
		height:200px;
		position:relative;
             }
	   p{
 	   	color:#ffffff;
	   }
           .top{
                position: absolute;
                top: 100px;
           }
      </style>
   </head>
   <body>

	<div> 
	   <p>Some text.</p>
	   <p class="top">Text with the top property.</p>
       </div>

   </body>
</html>

Also we can use negative values.

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
      <style>
	   div{
      	   	background-color:orange;
		height:200px;
		position:relative;
             }
	   p{
 	   	color:#ffffff;
	   }
           .top{
                position: absolute;
                top: -35px;
                color:#000000;
           }
      </style>
   </head>
   <body>

	<div> 
	   <p>Some text.</p>
	   <p class="top">Text with the top property.</p>
       </div>

   </body>
</html>

Property Values

Value Descriptions
auto When we use this, the browser will set the bottom edge position. It is the default value of this property.
length It sets the bottom edge position with px, cm etc. and we can use negative values.
% It sets the bottom edge position with % of containing element. We can use negative values.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.