top property affects the vertical position of a positioned element. It has no effect on non-positioned elements.
The effect of
top depends on how the element is positioned (i.e., the value of the position property):
topproperty specifies the distance between the element's top edge and the top edge of its containing block.
topproperty specifies the distance the element's top edge is moved above its normal position.
topproperty behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
topproperty has no effect.
When both top and bottom are specified, and height is unspecified or either auto or 100%, both the top and bottom distances are respected. In all other situations, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.
|Applies to||positioned elements|
|Computed value||as specified|
|Animatable||yes See animatable properties. Demo|
The following example shows how to use
The numbers in the table specify the first browser version that fully supports the
The following table describes the values of
|auto||The browser calculates the top edge position (This is default)|
|length||Sets the top edge position. Negative values are allowed See length units|
|initial||Sets this property to its default value|
|inherit||Inherits this property from its parent element|
CSS Positioned Element tutorial
CSS position property
CSS left property
CSS right property
CSS bottom property