Tag bottom

📍 CSS bottom: Positioning Elements from the Bottom Edge

In web layouts, controlling where elements appear is essential. The CSS bottom property helps you position an element relative to the bottom edge of its containing block, making it a key tool in CSS positioning.

🧾 What is bottom?

The bottom property specifies the distance between the bottom edge of a positioned element and the bottom edge of its containing block. It only works when the element’s position is set to relative, absolute, fixed, or sticky.

🧬 Syntax

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

Values:

  • <length> — fixed distance, e.g., 10px, 2em, 5vw
  • <percentage> — relative to the height of the containing block, e.g., 20%
  • auto — default; lets the browser decide positioning (usually no offset)

🎯 Examples

1. Absolute positioning 20px from bottom

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

Places .box 20 pixels above the bottom edge of its positioned ancestor.

2. Fixed footer stuck to bottom

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #333;
  color: white;
  padding: 1rem;
}

Makes a footer always visible at the bottom of the viewport.

3. Relative positioning moving element upwards

.banner {
  position: relative;
  bottom: 15px;
}

Shifts the .banner element upwards by 15px relative to its normal position.

🔍 How It Works

  • Works only if position is relative, absolute, fixed, or sticky.
  • For absolute and fixed, it positions relative to the nearest positioned ancestor or viewport.
  • For relative, it shifts the element from its normal position.
  • Negative values move the element below the bottom edge (or further down).

🛠️ Tips & Best Practices

  • Use bottom with position: fixed for sticky footers or floating elements.
  • Combine with left and right for precise control.
  • When used with position: relative, bottom shifts the element visually without changing layout flow.
  • Avoid using bottom on static positioned elements (default position).

✅ Browser Support

The bottom property is universally supported in all browsers, including:

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer 6+

🔚 Conclusion

The CSS bottom property is essential for precise vertical positioning of elements relative to their containers or the viewport. Whether creating sticky footers or nudging elements upward, bottom gives you versatile control in CSS layouts.