CSS Bottom

CSS bottom Property: Position Elements Precisely

The bottom property in CSS is used to position an element from the bottom of its containing element. It specifies the distance between the element’s bottom edge and the bottom edge of its containing block.

Syntax

element {
  position: type;
  bottom: value;
}

type: The positioning type (absolute, fixed, relative, sticky) must be set for the bottom property to have an effect.
value: Can be a length (e.g., px, em, rem), percentage (%), or auto.

Property Values

auto: The default value. The browser calculates the bottom position.
length: Specifies the bottom position in fixed units like px, em, rem, etc.
percentage: Specifies the bottom position as a percentage of the containing element’s height.

Examples

Absolute Positioning

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      position: absolute;
      bottom: 20px;
      left: 50px;
      width: 100px;
      height: 100px;
      background-color: lightcoral;
    }
  </style>
  <title>CSS Bottom Example</title>
</head>
<body>
  <div class="box">Positioned Box</div>
</body>
</html>

Try It Now

Explanation:

The .box element is positioned 20px from the bottom of its containing block and 50px from the left.
The position: absolute; allows the use of the bottom property.

Fixed Positioning

<style>
  .fixed-box {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
  }
</style>
<div class="fixed-box">Fixed Box</div>

Try It Now

Explanation:

The .fixed-box element is positioned at the bottom-right corner of the viewport and stays in that position even when the page is scrolled.

Relative Positioning
```
<style>
  .relative-box {
    position: relative;
    bottom: 10px;
    background-color: lightblue;
  }
</style>
<div class="relative-box">Relative Box</div>
```
Try It Now
Explanation:
- The .relative-box element is positioned 10px higher than its normal position. The position: relative; moves the element relative to its normal position.

Sticky Positioning

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      height: 2000px;
      margin: 0;
      font-family: Arial, sans-serif;
    }

    .sticky-footer {
      position: sticky;
      bottom: 0;
      background-color: lightgray;
      padding: 10px;
      text-align: center;
      border-top: 2px solid darkgray;
    }

    .content {
      height: 1500px;
      padding: 20px;
      background-color: lightblue;
    }
  </style>
  <title>Sticky Footer Example</title>
</head>
<body>

  <div class="content">
    <p>Scroll down to see the sticky footer in action.</p>
  </div>

  <div class="sticky-footer">
    This footer sticks to the bottom until you scroll past it.
  </div>

</body>
</html>

Try It Now

Explanation

The .sticky-footer element is positioned at the bottom of the viewport when you scroll down.
It sticks to the bottom until you scroll past its containing block, at which point it stops and remains fixed relative to its nearest scrollable ancestor.
The position: sticky; combined with bottom: 0; ensures that the footer remains visible at the bottom of the viewport during scrolling until the defined limit is reached.

Notes

The bottom property has no effect on non-positioned elements (i.e., elements without position: absolute, fixed, relative, or sticky).
When using percentages, the value is relative to the height of the containing block.

By mastering the bottom property, you can control the vertical placement of elements, creating more dynamic and visually interesting layouts.