Easy Tutorial
❮ Pr Grid Row Start Css3 Pr Text Shadow ❯

CSS top Property

Example

Set the top edge of the image 5 pixels below the top edge of its containing element:

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

Property Definition and Usage

The top property specifies the top edge of an element. It defines the offset between the top margin edge of a positioned element and the top edge of its containing block.

For relatively positioned elements, if both top and bottom are auto, their computed values are both 0; if one of them is auto, it becomes the negation of the other; if neither is auto, bottom becomes the negation of top.

Note: If the "position" property is set to "static", the "top" property has no effect.

Default value: auto
Inherited: no
--- ---
Version: CSS2
--- ---
JavaScript syntax: object.style.top="50px"
--- ---

Browser Support

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

Property Chrome IE Firefox Safari Opera
top 1.0 5.0 1.0 1.0 6.0

Property Values

Value Description
auto Default. The browser calculates the top edge position.
% Sets the top position in percent of the containing element. Can use negative values.
length Sets the top position using px, cm, etc. Can use negative values.
inherit Specifies that the value of the top property should be inherited from the parent element.

Related Articles

CSS Tutorial: CSS Positioning

❮ Pr Grid Row Start Css3 Pr Text Shadow ❯