CSS bottom Property

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

  • If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.
  • If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
  • If position: sticky; - the bottom property behaves like its position is relative when the element is inside the viewport, and like its position is fixed when it is outside.
  • If position: static; - the bottom property has no effect.

CSS Syntax

bottom: auto|length|initial|inherit;

Example -