CSS - top

Advertisements

Previous Page
Next Page  

Description

The top property defines an offset of the top edge of an absolutely positioned element from the top edge of its positioning context, or the vertical distance which a relatively positioned element will be displaced.

Possible Values

  • length − A fixed distance from the top of the positioning context.

  • percent − Some percentage of the height of the positioning context, assuming that the height of the context has been set explicitly. If not, then a percentage value for top is treated as though it were auto.

  • auto − Default. Lets the browser calculate the top position.

Applies to

All the HTML positioned element.

DOM Syntax

object.style.top = "2px";

Example

Here is the example which shows effect of this property −

Live Demo 
<html>
   <head>
   </head>

   <body>
      <p style = "position:absolute; top:100px;">
         This line will be positioned 100px below from the top edge of this window.
      </p>
   </body>
</html>

It will produce the following result −

Advertisements