top#

#Introduction

The top CSS property participates in specifying the vertical position. For more information, please refer to property position.

The effect of top depends on how the element is positioned (i.e., the value of the position property):

• When position is set to absolute or fixed, the top property specifies the distance between the element's outer margin of top edge and the inner border of the top edge of its containing block.

• When position is set to relative, the top property specifies the distance the element's top edge is moved below its normal position.

When both top and bottom are specified, position is set to absolute or fixed, and height is unspecified (either auto or 100%) both the top and bottom distances are respected. In all other situations, if height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored.

#Examples

css-apisrc/top/App.tsx

Preview

#Syntax

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

top: 10%;

/* Keyword value */
top: auto;

/* calc */
top: calc(1px + 1px);

#Values

#auto

Default value.

#<length>

A negative, null, or positive <length> that represents:

• for absolutely positioned elements, the distance to the top edge of the containing block.

• for relatively positioned elements, the distance that the element is moved below its normal position.

#<percentage>

Defines the height as a percentage of the containing block's height.

#Formal definition

#Difference with the web

mdn: top

#Compatibility

#FAQ