CSS top Property

This top property in CSS is used to specify the top position for the vertical positioned elements. It does not affect the non-positioned elements. It is one of the four offset properties that are left, right, and bottom.

The effect of this property depends on how the corresponding element is positioned i.e., the value of the position property. The top property has no effect when the position property is set to the value static.

  • If position: absolute; or position: fixed; - the top property sets the top edge of an element to a unit above/below the top edge of its nearest positioned ancestor.
  • If position: relative; - the top property makes the element's top edge to move above/below its normal position.
  • If position: sticky; - the top property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • If position: static; - the top property has no effect.

CSS Syntax

top: auto|length|initial|inherit;

Example -