CSS bottom Property

CSS bottom property specifies the vertical position of a positioned element in the layout. It basically specifies the position of the bottom edge of an element.

The bottom property has no effect on non-positioned elements. An element is called non-positioned if its status is static. That is, the bottom property will not affect elements having position: static;.

The effect of the bottom property varies with the position of the element i.e.

  • If the position of the element is relative, the element adjusts itself relative to its original(default) position.

In the example below, the <div> element moves 60px above from its original(default) position, as we have specified bottom: 60px;. Try it out:

Example:

div{
  position: relative;
  bottom: 60px;
}

  • If the position of the element is absolute, the element adjusts itself relative to the nearest positioned ancestor. If the element has no positioned ancestor, it adjusts itself relative to the viewport.

In the example below, the <div> element places itself 10px above from the bottom of the viewport, as it has no positioned ancestor and we have used bottom: 10px;. Try it out:

Example:

div{
  position: absolute;
  bottom: 10px;
}

  • If the position of the element is set to fixed, the element adjusts itself relative to the viewport. Also, the element will always be fixed and it will not scroll along with the webpage.

In the example below, the <div> element places itself 10px above from the bottom of the viewport and remains fixed on that position even if you scroll the webpage. Try it out:

Example:

div{
  position: fixed;
  bottom: 10px;
}

CSS Syntax

The bottom property has the below syntax:

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

Property Values

The bottom property accepts the following values:

autoThe browser itself calculates the bottom position of the element. This is the default value.
lengthSpecifies the bottom position of the element in a valid CSS length format such as ‘px’, ’em’, ‘rem’, ‘cm’, etc. Negative values are also allowed.
%Specifies the bottom position of the element in percentage(%). The percentage value is calculated from the parent element’s total height. Negative values are also allowed.
initialSets the bottom property to its default value(auto).
inheritInherits the bottom property from the parent element.

general Info

Default Valueauto
InheritedNo
JavaScript Usageelement.style.bottom= “10px”;