English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
The top CSS property specifies the top edge of an element. This property defines the offset between the upper margin boundary of a positioned element and the upper boundary of its containing block.
For relative definition elements, if both top and bottom are auto, their computed values are both 0; if one of them is auto, it takes the opposite number of the other; if neither of them is auto, bottom takes the opposite value of top.
Note: If the value of the "position" attribute is "static", setting the "top" attribute will have no effect.
ForAbsolutely positionedelements, the top attribute specifies the distance offset from the top edge of the element box to the top edge of the containing block.
ForRelatively positionedElement, the top attribute specifies the offset of the top edge of the element box relative to the top edge of the box itself (i.e., the normal flow position is specified for the box, and then offset is made from this position according to these attributes).
The following table provides usage instructions and version history of this attribute, as well as its usage syntax in JavaScript scripts.
| Default value: | auto |
|---|---|
| Applies to: | Positioned element |
| Inheritance: | No |
| Can be animated: | Yes.Please refer to Animation attribute. |
| Version: | CSS 2,3 |
| JavaScript syntax: | object.style.top="60px" |
The syntax of this attribute is as follows:
top: length | percentage | auto | initial | inherit
The following example demonstrates how to use the top attribute.
p {
position: absolute;
top: 150px;
}Test to see‹/›The following table describes the value of this attribute.
| Value | Description |
|---|---|
| length | Numeric values in units such as px, pt, cm, em, etc., negative values are allowed. |
| percentage | Specify a percentage offset. The percentage is calculated relative to the height of the element's containing block. Negative percentage values are allowed. |
| auto | The browser calculates the upper edge position. This is the default value. |
| initial | Set this attribute to its default value. |
| inherit | If specified, the associated elements adopt the top attribute value of their parent element. |
Browser compatibility of the top attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.
|
Please refer to the following tutorials:CSS positioning,CSS layer.