English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

CSS Reference Manual

CSS @rules (RULES)

Complete List of CSS Properties

CSS bottom property usage and examples

The bottom CSS property specifies the offset of the bottom edge of the positioned element from the bottom of the containing block or the browser window.

  • ForAbsolutely positionedelements, the bottom attribute specifies the distance that the bottom edge of the element box is offset above the bottom edge of the containing block.

  • ForRelatively positionedFor the element, the bottom attribute specifies the offset of the bottom edge of the element box from the bottom edge of the box itself (i.e., the box is given a position in the normal flow, and then offset from this position according to these properties).

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
Animatable:Yes.Please refer to Animation Attribute.
Version:CSS 2,3
JavaScript Syntax: 
object.style.bottom="50px"

bottom Syntax

The syntax of this attribute is as follows:

bottom: length | percentage | auto | initial | inherit

The following example demonstrates how to use the bottom attribute.

  p {
   position: absolute;
   bottom: 150px;
  }
Test and see‹/›

Attribute Value

The following table describes the value of this attribute.

ValueDescription
lengthSpecify the offset as a length value in units such as px, pt, cm, em, etc. Negative length values are allowed.
percentageSpecify a percentage offset. The percentage is calculated relative to the height of the element's containing block. Negative percentage values are allowed.
autoBrowser calculates the bottom edge position. This is the default value.
initialSet this attribute to its default value.
inheritIf specified, the associated element adopts the bottom attribute value of its parent element.

Browser Compatibility

Browser Compatibility of bottom Attribute, the numbers in the table below represent the minimum version number of browsers that support this attribute; all mainstream browsers support this attribute.

  • Firefox 1+

  • Google Chrome1+

  • Internet Explorer 5+

  • Apple Safari 1+

  • Opera 6+

Read More

Please refer to the following tutorials:CSS Position (position),CSS Layer.

Related Attributes:position,top,right,left,z-index.