CSS top Property
The top property in CSS is used to describe an element's top position. The top property varies depending on the element's position.
If the position value is fixed or absolute, the element's top edge is adjusted in relation to the top edge of its parent element or the block that holds it. If the position value is relative, the element is positioned relative to its own top edge. If the position value is static, the top property has no effect on the element.
When both top and bottom distances are specified, position is set to absolute or fixed, and height is left unspecified (either auto or 100%), both distances are respected. If height is constrained in any way or position is set to relative, the top property takes precedence and the bottom property is ignored in all other cases.
Syntax
Property Values
| Value | Description |
|---|---|
| auto | Allows the browser to compute the top edge position. This is the default setting. |
| length | Sets the top edge position in pixels, centimeters, and so on. Negative values are permitted. Learn more about length units. |
| % | Sets the top edge position in terms of the percentage of the containing element. Negative values are permitted. |
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| top | 1.0 | 1.0 | 1.0 | 5.0 | 6.0 |