CSS 2.1 Reference: bottom Property

The bottom property is used to set the bottom 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 bottom property is used as follows:

• For elements with a position property value of relative - The bottom of the element's box is offset from the bottom of its normal flow position by the value of the bottom property. Positive values move the element's box upward. For example, setting the bottom property value to 20px will place the bottom of the element's box 20px above its normal flow position.
• For elements with a position property value of absolute - The bottom of the element's box is offset from the bottom of its containing block by the value of the bottom property. Its containing block is the nearest ancestor element that has its position property set to relative, absolute, or fixed. Positive bottom property values move the element's box upward. For example, setting the bottom property value to 20px will place the bottom of the element's box 20px above the bottom of its containing block.
• For elements with a position property value of fixed - The bottom of the element's box is offset from the bottom of its browser window by the value of the bottom property. Positive values move the element's box upward. For example, setting the bottom property value to 20px will place the bottom of the element's box 20px above the bottom 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 bottom properties are set for 2 different elements which are using the relative and absolute position properties.

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

• auto - The bottom 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.