Bottom Property
Last updated: 2026-09-13
bottom Bottom Property
The bottom property defines the offset of a positioned element from the bottom edge of its containing block, measured upward. It only applies to non-static positioned elements and is typically used with absolute or fixed positioning to align elements to the bottom or stretch their height.
| Category | |
|---|---|
| Initial Value | auto |
| Inherited | No |
| Applies To | |
| Animation Type | |
| CSS Version | CSS2 |
| Status | Standard |
📝 Syntax
bottom: auto | <length> | <percentage>;⚙️ Values
| Value | Type | Description |
|---|---|---|
auto | Keyword | No offset. |
<length> | <percentage> | Type | An offset from the containing block's bottom edge. |
▶ Example
Edit the code below and see the live result in the playground:
🌐 Browser Support
| Browser |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| bottom | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Supported in all major browsers | |||||
Warning： bottom only affects non-static positioned elements; it has no effect on position:static.
Tip： A percentage is computed against the containing block's height. Setting both top and bottom (without a height) stretches the element to fill the vertical space.
❓ FAQ
QWhat happens when both top and bottom are set?
AFor absolute or fixed positioning without a height, the element stretches to fill the space between top and bottom, enabling adaptive vertical stretching; with a height set, top wins and bottom is ignored. With relative positioning, top takes priority. This technique is often used for full-height background layers and flexible regions between a bottom bar and a top-aligned element, giving the box a height that adjusts automatically.
QWhat is the bottom percentage relative to?
AThe percentage is computed against the containing block's height. For absolute elements the containing block is the padding box of the nearest positioned ancestor; for fixed it is the viewport; for relative it is the element's original position. For example, bottom:0 aligns the element's bottom edge with the containing block's bottom, and combining it with left:0; right:0 makes the element hug the bottom and stretch full width.
QHow do I fix a button or toolbar to the bottom?
ATo pin it to the viewport bottom, use position:fixed; bottom:0; left:0; right:0, and it stays put while scrolling; give the body padding-bottom so content is not hidden underneath. To pin it within a container, make the parent position:relative and the child position:absolute; bottom:0; left:0; right:0. Both are common for bottom toolbars and action bars, and the fixed variant is the basis of mobile app bars.
QWhich has higher priority: bottom or top?
AWhen the element has a height, top wins and bottom is ignored, since top is preferred in LTR's vertical direction by default. Without a height, top and bottom together determine the element's height by stretching it to fill the gap, similar to how left and right work horizontally. For precise control, set only one of them so the behavior stays predictable.
🏷️ Related Properties
💡 Related Cases
📚 Related Tutorials
top (Top Offset)
The property that offsets from the top edge.
position Property
Learn the prerequisites for bottom to take effect.
