W3docs
en
Log in

CSS bottom property

The CSS bottom property specifies the bottom position of an element in combination with the position property. Find examples and try it yourself.

The CSS bottom property specifies the bottom position of an element in combination with the position property.

Note: The bottom property has no effect on elements with position: static (the default).

Depending on how the element is positioned, the effect of the bottom property may be different. Particularly:

  • When the positioning of an element is relative, absolute, fixed, or sticky, the bottom value plays a significant role.
  • When the position is fixed, the element is positioned relative to the screen's viewport and stays fixed when scrolling.
  • When it is absolute, the element is positioned relative to its container.
  • When the position is relative, it makes the element's bottom edge move above or below its normal position.
  • For sticky, the element behaves like relative until a scroll threshold is reached, after which it behaves like fixed relative to the viewport.
Initial Valueauto
Applies toAll elements. It also applies to ::first-letter.
InheritedNo.
AnimatableYes. The bottom position can be animatable.
VersionCSS2
DOM Syntaxobject.style.bottom = "10px";

Syntax

Syntax of CSS bottom property

bottom: auto | length | percentage | initial | inherit;

Example of the bottom property:

Example of CSS bottom property with position absolute value

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 300px;
        width: 80%;
        border: 3px solid #8ebf42;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Bottom property example</h2>
    <div class="parent">
      The position of this div is set to relative.
      <div class="absolute">This div's bottom edge is placed 10 pixels above the bottom edge of the containing element, and the position is set to absolute.</div>
    </div>
  </body>
</html>
Try it Yourself »

Result

CSS bottom property

Example of the bottom property with all the positions:

Example of CSS bottom property with all positions

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.parent {
        position: relative;
        height: 180px;
        border: 3px solid #8AC007;
      }
      div.absolute {
        position: absolute;
        width: 50%;
        bottom: 20px;
        border: 3px solid #8AC007;
      }
      div.relative {
        position: relative;
        width: 50%;
        bottom: 2px;
        border: 3px solid #8AC007;
      }
      div.fixed {
        position: fixed;
        width: 50%;
        bottom: 50px;
        border: 3px solid #8AC007;
      }
      div.sticky {
        position: sticky;
        top: 0;
        width: 50%;
        bottom: 10px;
        border: 3px solid #8AC007;
      }
    </style>
  </head>
  <body>
    <h2>Bottom property example</h2>
    <div class="parent">
      This div element has position: relative.
      <div class="absolute"><strong>position: absolute and bottom 20px</strong>
        <br />This div's bottom edge is placed 20 pixels above the bottom edge of the containing element.</div>
    </div>
    <br />
    <div class="parent">
      This div element has position: relative.
      <div class="relative"><strong>position: relative and bottom 2px</strong>
        <br />This div's bottom edge is placed 2 pixels above its normal position.</div>
    </div>
    <br />
    <div class="fixed"><strong>position: fixed and bottom 50px</strong>
      <br />This div's bottom edge is placed 50 pixels from the bottom of the viewport.</div>
    <div class="parent">
      This div element has position: relative.
      <div class="sticky"><strong>position: sticky and bottom 10px</strong>
        <br />This div is sticky.</div>
    </div>
  </body>
</html>
Try it Yourself »

Values

ValueDescriptionPlay it
autoThis is the default value. It lets the browser calculate the bottom edge position.Play it »
percentageDefines the element’s position in percentages of the containing block height.
lengthDefines the position of the element in px, cm, etc. Negative values are allowed.Play it »
initialSets the property to its default value.Play it »
inheritInherits the property from its parent element.

Practice

Practice

What does the 'bottom' property in CSS do?