CSS bottom Property

Definition and Usage

The bottom property sets the vertical inset from the bottom for a positioned element. It has no effect when position is static (the default).

With absolute or fixed, it is the gap between the element’s bottom margin edge and the containing block’s bottom. With relative, a positive value moves the element up from its normal position. Pair it with top, left, and right as needed.

CSS Syntax

The initial value is auto. Percentages refer to the containing block’s height.

Property Values

How to Use bottom

Position the element first, then set how far it sits from the bottom.

1. Set position to relative, absolute, fixed, or sticky.
2. For absolute, give a parent position: relative (or another positioned ancestor) so the containing block is clear.
3. Set bottom to a length, percentage, or auto.
4. Add left/right if you also need a horizontal inset.

Live Preview

An absolutely positioned box sits inside a relative stage. Change bottom and watch the gap from the lower edge.

CSS Examples

Each snippet focuses on bottom with the minimum positioning needed to see it. Use Try It Yourself for a live editor.

<style>
  .stage {
    position: relative;
    height: 160px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    bottom: 20px;
    left: 16px;
    background: #2563eb;
    color: #fff;
    padding: 8px;
  }
</style>

<div class="stage">
  <div class="box">20px up</div>
</div>

<style>
  .box {
    position: relative;
    bottom: 24px;
    background: #2563eb;
    color: #fff;
    padding: 8px;
    display: inline-block;
  }
</style>

<p>Text before <span class="box">shifted up</span> text after.</p>

<style>
  .stage {
    position: relative;
    height: 160px;
    border: 1px solid #ccc;
  }
  .box {
    position: absolute;
    bottom: 25%;
    left: 16px;
    background: #2563eb;
    color: #fff;
    padding: 8px;
  }
</style>

<div class="stage">
  <div class="box">25%</div>
</div>

Key Takeaways