CSS top Property

The CSS top property specifies the top offset of positioned elements. It has no effect on non-positioned elements. In other words, the element should have a position value other than the default static for this property to have any effect.

The initial value of CSS top property is auto. You can only apply it to positioned elements. This property is not inheritable. The final computed value of this property is the corresponding absolute length if specified as a length, or the specified value if specified as a percentage. This property is animatable a length.

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block. For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

Syntax

This is the formal syntax for using top property.

top: <length> | <percentage> | auto

Here are some examples of using this property.

/* <length> values */
top: 3px;
top: 2.4em;

/* <percentages> of the height of the containing block */
top: 10%;

/* Keyword value */
top: auto;

/* Global values */
top: inherit;
top: initial;
top: unset;

Acceptable Values

<length>

In this case, the top offset is specified as a fixed length. Negative values are allowed. A positive value will offset the element downwards from the top edge of its positioning context, while a negative value will offset it upwards with respect to the top edge of the context.

For absolutely positioned elements, it determines the distance to the top edge of a non statically positioned containing block. For relatively positioned elements, it determines the offset that the element is moved below its position in the normal flow if it wasn’t positioned.

<percentage>

In this case, the top offset is specified as a percentage of its containing block’s height. Negative values are allowed in this case as well. A positive value will offset the element downwards from the top edge of its positioning context, while a negative value will offset it upwards with respect to the top edge of the context.

auto

When top is set to auto then:

  • If the element is relatively positioned, it will be positioned (vertically) according to the value of the bottom property. If the bottom property is also set to auto, the element is not offset vertically at all.
  • If the element is absolutely positioned, it will be positioned (vertically) according to the value of the bottom property, and if its height is height: auto, it will get its height based on its content.

Working Examples

Browser Support

The CSS top property is supported in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Further Reading

  1. Read more about the CSS <top> property on MDN.
  2. You can also read the CSS <top> property on W3C.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top