CSS top Property


Example

Set the top edge of the image to 15px below the top edge of its containing element:

img {
    position: absolute;
    top: 15px;
}

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 containing element.

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

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
top 1.0 5.0 1.0 1.0 6.0 

CSS Syntax

top: auto|length|initial|inherit;

Property Values

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

Related Pages

CSS tutorial: CSS Positioning

CSS reference: bottom property

CSS reference: left property

CSS reference: right property

HTML DOM reference: top property



SHARE THIS PAGE

COLOR PICKER

colorpicker