CSS bottom Property

What You’ll Learn

The bottom property offsets an element from the bottom edge of its containing block. It works with positioned elements to place boxes, footers, and overlays exactly where you need them.

Definition and Usage

The bottom CSS property sets the vertical offset of a positioned element from the bottom edge of its containing block. A positive value moves the element upward; the element sits that distance above the bottom edge.

Use bottom when you want to anchor UI near the lower edge of a container or the viewport — for example, a badge inside a card, a fixed footer bar, or an absolutely positioned overlay.

📝 Syntax

The syntax for bottom accepts length values, percentages, or the keyword auto:

selector {
  bottom: <length> | <percentage> | auto;
}

Basic Example

.box {
  position: absolute;
  bottom: 20px;
}

The value can be a length such as 20px, 1rem, or 2em, a percentage such as 10%, or auto to let the browser calculate placement.

Syntax Rules

• The initial value is auto.
• Requires a positioned element: relative, absolute, fixed, or sticky.
• Length values use units like px, em, or rem.
• Percentages are relative to the containing block’s height.
• Pair with left, right, or top for full placement control.

Default Value

The default value of bottom is auto. This means the element is not explicitly offset from the bottom unless you set a length or percentage.

With auto, the browser places the element using normal flow rules or other offset properties such as top.

💎 Property Values

The bottom property accepts length values, percentages, and the keyword auto.

When bottom Works (position types)

bottom only affects elements that are taken out of normal static flow or offset within it. It works with these position values:

• position: relative — shifts the element upward from its normal position by the bottom value.
• position: absolute — places the element relative to its nearest positioned ancestor (or the initial containing block).
• position: fixed — anchors the element relative to the viewport, useful for persistent footer bars.
• position: sticky — applies bottom as a threshold when the element becomes stuck during scroll.

bottom vs top vs inset-block-end

Examples Gallery

Try bottom with absolute positioning, fixed footers, relative offsets, and percentage values.

<style>
  .container {
    position: relative;
    height: 200px;
    border: 1px solid #000;
  }
  .box {
    position: absolute;
    bottom: 20px;
    width: 100px;
    height: 100px;
    background-color: blue;
  }
</style>

<h1>Box Positioned 20px from the Bottom</h1>
<div class="container">
  <div class="box"></div>
</div>

<style>
  .footer-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.75rem 1rem;
    background: #1e293b;
    color: #fff;
    text-align: center;
    font-size: 0.875rem;
  }
</style>

<p>Scroll the page — the footer stays at the bottom.</p>
<div class="footer-bar">Fixed footer with bottom: 0</div>

<style>
  .offset-box {
    position: relative;
    bottom: 12px;
    padding: 0.75rem 1rem;
    background: #dbeafe;
    border: 1px solid #2563eb;
    max-width: 16rem;
  }
</style>

<p>Text above the offset box.</p>
<div class="offset-box">
  Nudged 12px upward with bottom.
</div>
<p>Text below — original space is preserved.</p>

<style>
  .container {
    position: relative;
    height: 200px;
    border: 1px solid #64748b;
  }
  .box {
    position: absolute;
    bottom: 10%;
    left: 10%;
    width: 80px;
    height: 80px;
    background: #16a34a;
  }
</style>

<div class="container">
  <div class="box"></div>
</div>

💡 Best Practices