CSS top Property

CSS top Property

CSS top property has no effect on non positioned element, and it is used to specify the vertical position of an element.

It must be used along with the position property.


How top css property works with different position property values

The following are the position values used,

  • absolute and fixed property is used to specify the distance between the top edge of the element and top edge of the container it is present in.
  • relative is used to specify the distance the top property of the specified element should move above the normal position.
  • sticky works according to the position the element is in. If the element is inside the viewport it behaves as relative position, if it is outside it behaves as fixed position.
  • static has no effect.

Example

Try Yourself