# top

## Introduction

`top`This property defines the offset between the top margin border of a positioned element and the top border of its containing block. Setting this property for non-positioned elements has no effect. That is, only elements with the following attributes set can use the `top` attribute。

```css
position: fixed;
position: absolute;
```

`top`The effect depends on the element's `position` property: when `position` is set to `absolute` or `fixed`, the `top` property specifies the offset between the top margin border of the positioned element and the top border of its containing block。

## Grammar

```css
/* <length> */
top: 3px;
top: 2rpx;
top: 2.4em;
top: 3rem;
/* as a percentage of the height of the containing block */
top: 10%;
/* Keyword value */
top: auto;
/* calc */
top: calc(1px + 1px);
```

### Standardized grammar

-   `auto`

-   `<length>`

-   `<percentage>`

-   `calc()`

## standardized grammar

```css
top: auto | <length> | <percentage> | <function>
```