CSS 2.1 Reference: top Property

The top property is used to set the top position of an element's box. This property can be used for elements that have a position property value of relative, absolute, or fixed. The top property is used as follows:

• For elements with a position property value of relative - The top of the element's box is offset from the top of its normal flow position by the value of the top property. Positive values move the element's box downward. For example, setting the top property value to 20px will place the top of the element's box 20px below its normal flow position.
• For elements with a position property value of absolute - The top of the element's box is offset from the top of its containing block by the value of the top property. Its containing block is the nearest ancestor element that has its position property set to relative, absolute, or fixed. Positive top property values move the element's box downward. For example, setting the top property value to 20px will place the top of the element's box 20px below the top of its containing block.
• For elements with a position property value of fixed - The top of the element's box is offset from the top of its browser window by the value of the top property. Positive values move the element's box downward. For example, setting the top property value to 20px will place the top of the element's box 20px below the top of its browser window.

This property is specified by using a length, percentage, or keyword, according to the syntax shown above. If a percentage value is used, the value will be a percentage of the containing block's height.

CSS Example: The top properties are set for 2 different elements which are using the relative and absolute position properties.

  #tst1 {position: relative; top: 40px;}
  #tst2 {position: absolute; top: 40px;}

• auto - The top offset is automatically set by the browser.
• inherit - The inherit keyword is used to specify that the value for this property should be taken from the parent element. If inherit is used with the root element, then the initial value for this property will be used.