CSS bottom property

CSS bottom Property

The bottom property in CSS is used to specify the vertical position of an element relative to its nearest positioned ancestor (an ancestor with a position other than static). It works in conjunction with position: absolute, position: fixed, or position: relative to adjust the position of an element.

1. Syntax

selector {
  bottom: value;
}

Value	Description
length	Specifies a fixed distance (e.g., px, em, %, etc.) from the bottom of the element's containing block.
%	Defines the distance relative to the height of the containing block.
auto (default)	The browser automatically calculates the position of the element.

2. How It Works

• When you set an element's position to absolute, fixed, or relative, the bottom property allows you to define how far the element should be from the bottom edge of its containing block or viewport (for fixed positioning).

• The element is positioned relative to the bottom edge when you specify a value for bottom.

3. Example – Using bottom with position: absolute

div {
  position: absolute;
  bottom: 20px;
  left: 50px;
  background-color: #f1f1f1;
}

<div>
  This div is positioned 20px from the bottom of its nearest positioned ancestor.
</div>

✅ The <div> will be 20px above the bottom of its containing element.

4. Example – Using bottom with position: fixed

div {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #333;
  color: white;
  text-align: center;
}

<div>
  This div is fixed to the bottom of the viewport.
</div>

✅ The <div> will always be at the bottom of the browser window.

5. Example – Using bottom with position: relative

div {
  position: relative;
  bottom: 30px;
  background-color: #f1f1f1;
}

<div>
  This div is moved 30px up relative to its normal position.
</div>

✅ The <div> is shifted 30px upward from its original position.

6. Best Practices

✔ Use bottom with position: absolute when you need to place an element at a specific distance from the bottom of its container.
✔ For fixed positioning, use bottom: 0 to pin elements (like footers) to the bottom of the viewport.
✔ Avoid using bottom with position: static, as it has no effect unless the position is set to something else.