This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.



Sets the position of the bottom edge of an element.

Overview table

Initial value
Applies to
All elements
Computed value
If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto’.
CSS Object Model Property


  • bottom: auto
  • bottom: length
  • bottom: percentage


Default. Default position, according to the regular HTML layout of the page.
Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px). For more information about the supported length units, see CSS Values and Units Reference.
Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.


We demonstrate the `bottom` property by positioning these elements.

.container {
   * Object is positioned according to the normal flow, and then offset.
  position: relative;

.absolutely-positioned-within-container {
   * Object is positioned relative to nearest positioned ancestor—or
   * to the initial containing block if no positioned ancestor exists.
   * Here, the nearest positioned ancestor is the `<div class="container"^gt;`.
  position: absolute;
   * Offsets this element 50px above the container's bottom edge.
   * Note: `length` can also be specified in other units of measurements.
  bottom: 50px;

.absolutely-positioned-within-body {
   * Here, the nearest positioned anscestor does not exist, hence
   * the coordinate system reference becomes the initial containing block,
   * i.e. the `<body>`.
  position: absolute;
   * Offsets this element 100px above the initial containing
   * block's bottom edge i.e. the `<body>`'s bottom edge.
  bottom: 100px;

.relatively-positioned {
   * Object is positioned according to the normal flow, and then offset.
  position: relative;
   * The layout for this element happens according to the normal flow.
   * But because this element is positioned relatively, it will be
   * offset 20px towards the left from where it would have been in
   * the normal flow.
  bottom: 20px;

View live example

The HTML for the above example.

  <div class="container">
    <p class="box absolutely-positioned-within-container">Absolutely positioned within <code>div.container</code> at 50px above the bottom edge.</p>
    <p class="box relatively-positioned">This is relatively positioned at 20px from the bottom.</p>

  <p class="box absolutely-positioned-within-body">This is absolutely positioned within the <code>body</code> at 50px above the bottom edge.</p>

Related specifications

CSS 2.1, Visual formatting model
W3C Recommendation

See also

Related articles

Box Model

Related pages