B.20. bottom

This property lets you set the distance between the bottom edge of an absolute positioned element (including its padding, border, and margin)^[2] and the bottom edge of the positioning context in which it resides. The positioning context is the content area of the element's nearest ancestor that has a position property value other than static, or the body element.

^[2] The CSS2 specification contains an error that suggests that the padding, border, and margin of the positioned element should not be considered. This has been acknowledged as a mistake by the CSS Working Group in the Errata document for CSS2.

In Internet Explorer for Windows, Netscape 6, and Mozilla browsers, when the positioning context is the document body, the element is positioned relative to the bottom edge of the browser window (when no scrolling has yet occurred) instead of the document area, as the CSS Specification requires. Internet Explorer 5 for Macintosh follows the specification and positions the block relative to the bottom of the document area.

For relative positioned elements, this property sets a relative offset from the normal position of its bottom edge. So, a setting of 10px will shift the bottom edge of the box up by 10 pixels, and a setting of -10px will shift it down by the same amount.

Inherited: No

See also: Section B.90position, Section B.55left, Section B.118top, and Section B.93right

B.20.1. Value

A CSS length measurement, a percentage value, or the auto constant. Percentages are based on the height of the parent element. The auto constant tells the browser to determine the position of the bottom edge itself, based on whatever other constraints may exist on the size/position of the element.

Initial value: auto

B.20.2. Compatibility

CSS Version: 2

Works in Internet Explorer 5 or later, Netscape 6 or later, and Mozilla browsers.

Often, the same effect can be achieved by setting the top property of a box. Since top is supported by more browsers than bottom, this should be done whenever possible.

B.20.3. Example

This style rule positions the element with ID menu at the bottom of the window (or the bottom of the document in Internet Explorer for Macintosh):

#menu {
  position: absolute;
  bottom: 0;
  width: 100px;
  height: 200px;
}