CSS bottom Property

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The bottom property controls how an element is offset vertically from the bottom edge of the box it is positioned against. It only has an effect when an element participates in a positioning scheme other than the normal static flow - specifically when its position is set to a value that establishes a positioned box. Conceptually, it tells the browser where the element’s box should sit relative to the bottom border of its containing block rather than where it would normally appear in the document flow.

How that offset is applied depends on the element’s positioning mode. For elements shifted with relative positioning, the bottom offset moves the element visually but does not change the original space the element occupies in the flow. For absolutely or fixed positioned elements the element is taken out of normal flow and the offset anchors the element to the containing block’s bottom edge. For elements using a sticky positioning model, the bottom offset is part of the rules that determine when the element becomes "stuck" during scrolling and how it is pinned relative to the viewport or scrolling container.

The bottom property interacts with the complementary directional properties such as top, left and right. Specifying opposing offsets can change whether an element is simply moved or whether it becomes stretched between two edges; margins and transforms can also affect an element's final visual placement. For example, adjacent margin values still participate in layout calculations and a later transform will visually move the element after layout, so consider margin and transform when planning precise alignment.

In practical use, bottom is commonly used to anchor overlays, footers, and pinned controls to the lower edge of a container or the viewport. Because its behavior differs between positioning modes - and because absolute/fixed positioned elements no longer occupy space in normal flow - it’s important to choose the positioning strategy that matches the intended document flow and accessibility requirements rather than relying solely on offsets to arrange elements.

Definition

Initial value: auto
Applies to: Positioned elements
Inherited: No
Computed value: If specified as a length, the corresponding absolute length; if specified as a percentage, the specified value; otherwise, 'auto'
Animatable: Yes
JavaScript syntax: object.style.bottom

Interactive Demo

bottom: 0;

bottom: 30px;

bottom: 20%;

bottom: 5em;

I am absolutely positioned.

The rusty swing set creaked a lonely lullaby in the twilight, shadows lengthening like grasping fingers across the dew-kissed grass. A lone dandelion seed, adrift on the breeze, whispered secrets of faraway fields, of dandelion suns and galaxies spun from fluff.

Syntax

bottom: auto | <length> | <percentage>

Values

<length>Floating-point number, followed by an absolute units designator (cm, mm, in, pt, or pc) or a relative units designator (em, ex, or px).
<percentage>Integer, followed by a percent sign (%). The value is a percentage of the height of the parent object.
autoDefault position, according to the regular HTML layout of the page.

Example

HTML

<body>

  <div class="container">

    <div class="content">

      <h1>Example: CSS bottom property</h1>

      <p>Scroll inside the white box; the blue badge is positioned using bottom: 20px.</p>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vehicula lectus ut purus pharetra, nec tempor nunc aliquet.</p>

    </div>

    <div class="anchored">Anchored to bottom: 20px</div>

  </div>

  <div class="fixed-footer">Fixed footer (bottom: 0)</div>

</body>

CSS

/* Styles demonstrating the bottom property (absolute and fixed) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 'Helvetica Neue', Arial;
  background: #f7f7fb;
  color: #222;
  min-height: 100vh;
}

.container {
  position: relative;
  margin: 32px auto;
  width: 90%;
  max-width: 800px;
  height: 320px;
  padding: 20px;
  border: 1px solid #e3e6ee;
  background: #fff;
  overflow: auto;
}

.content {
  height: 700px;
}

.anchored {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: #0b76ef;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(11,118,239,0.18);
}

.fixed-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(34,34,34,0.96);
  color: #fff;
  text-align: center;
  padding: 12px 16px;
  font-size: 14px;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS bottom property. Hover over a browser icon to see the version that first introduced support for this CSS property.