CSS top attribute

Definition and usage

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

Note:If the value of the "position" property is "static", setting the "top" property will have no effect.

Description

For static elements, it is auto; for length values, it is the corresponding absolute length; for percentage values, it is the specified value; otherwise, it is auto.

For relatively defined elements, if both top and bottom are auto, their calculated values are both 0; if one of them is auto, the opposite value of the other is taken; if neither of them is auto, bottom takes the opposite value of top.

See also:

CSS Tutorial:CSS Positioning

HTML DOM Reference Manual: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;
  }

Try it yourself

CSS syntax

top: auto|length|initial|inherit;

Attribute value

Value Description
auto Default value. The position of the top edge is calculated by the browser.
% Set the top position of an element as a percentage of the containing element. Negative values can be used.
length Set the top position of an element using units such as px, cm, etc. Negative values can be used.
inherit Specifies that the value of the top property should be inherited from the parent element.

Technical details

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

More examples

Set the top edge of an image using fixed values
This example demonstrates how to set the top edge of an image using fixed values.
Set the top edge of an image using percentage
This example demonstrates how to set the top edge of an image using percentage values.

Browser support

The numbers in the table indicate the first browser version that fully supports this attribute.

Chrome IE / Edge Firefox Safari Opera
1.0 5.0 1.0 1.0 6.0