CSS top Property

Set the top edge of the absolute positioned <div> element to 80px below the top edge of its nearest positioned ancestor:

div.absolute {
position: absolute;
top: 80px;
width: 200px;
height: 100px;
border: 3px solid #8AC007;
}

Try it Yourself »


Definition and Usage

For absolutely positioned elements, the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor. Note: If an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. Note: A “positioned” element is one whose position is anything except static.

For relatively positioned elements, the top property sets the top edge of an element to a unit above/below its normal position.

Note: If “position:static”, the top property has no effect.

Default value: auto
Inherited: no
Animatable: yes. Read about animatable – Try it
Version: CSS2
JavaScript syntax: object.style.top=”100px”Try it

 

CSS Syntax

top: auto|length|initial|inherit;

Property Values

Value Description
auto Lets the browser calculate the top edge position. This is default
length Sets the top edge position in px, cm, etc. Negative values are allowed.
% Sets the top edge position in % of containing element. Negative values are allowed
initial Sets this property to its default value. Read about initial
inherit Inherits this property from its parent element. Read about inherit