In this section, we will learn what the top property is and how to use it in CSS.

CSS top Property Definition and Usage

When working with the CSS position property and using values other than “static” for this property, in order to control the position of the target element, we use `bottom`, `left`, `right`, `top` properties.

In this section, we will learn what the top property is and in later sections we’ll see the other mentioned properties as well.

If the position property is set to “fixed”: the top property is used to set the top distance of the element from the top edge of the viewport.

If the position property is set to “absolute”: the top property is used to set the top distance of the target element from the top edge of its closest ancestor that is not positioned “static”.

If the position property is set to “relative”: the top property is used to set the top distance of the target element from its original position.

If the position property is set to “sticky”: The top property is used to set the top offset (on what distance from the viewport top side) the target element should become fixed.

If the position property is set to “static”: the top property has no effect.

CSS top Property Syntax

top: auto|length|initial|inherit;

CSS top Property Value

The value of this property is a number with any supported CSS units (relative or absolute).

Also, we can use percentage values as well.

Notes:

• The default value of this property is set to “auto” and that means it’s up to browsers to calculate the top distance of the target element.
• The two global values, “initial” and “inherit” can also be used for this property.

Example: top property in CSS

See the Pen top property in CSS by Enjoy Tutorials (@enjoytutorials) on CodePen.