top - HTML CSS CSS Property

HTML CSS examples for CSS Property:top

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. top

Description

This top CSS property sets the element top edge, relative to the top edge of the element's box or browser window.

The following table summarizes the top Property.

Item Value
Default value: auto
Applies to:Positioned elements
Inherited: No
Animatable: Yes.

Syntax

The syntax of the property is as follows: 

top:     length | percentage | auto | initial | inherit

Property Values

The following table describes the values of this property.

Value Description
length Set top as a length value in px, pt, cm, em, etc. Negative length values are allowed.
percentage Set top in percentage which is calculated with respect to the height of the element's containing block. Negative percentage values are allowed.
auto The browser calculates the top position. This is default value.
initialSets this property to its default value.
inherittake the value of its parent element top property.

The example below shows the top property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS top property</title>
  <style type="text/css">
    p {<!-- w w  w  .  j  a v a  2 s. c  om-->
    width: 200px;
        position: absolute;
        top: 150px;
        padding: 20px;
        font: bold 18px sans-serif;
        background: #9acd32;
    }
</style>
 </head>
 <body>
  <p>Play with the top property value to see how it works.</p>
 </body>
</html>

Related Tutorials