bottom

bottom is the physical bottom inset of a positioned box. With relative positioning, a positive value moves the box upward. With absolute positioning, it measures inward from the containing block’s bottom padding edge to the box’s bottom margin edge.

Move up from the original slot

The blue box moves up 12px. Its original slot remains in normal flow, leaving the surrounding layout unchanged.

<div class="parent"><div class="box">bottom: 12px</div></div>

.parent {
  padding: 1rem;
  background: #e2e8f0;
}
.box {
  position: relative;
  bottom: 12px;
  padding: 0.5rem;
  background: #dbeafe;
}

Place a caption near a decorative frame’s bottom

The parent establishes the containing block and reserves enough height for the caption. The bottom inset keeps the caption 1rem from the frame’s lower edge.

<div class="frame"><p class="caption">A decorative blue frame</p></div>

.frame {
  position: relative;
  min-height: 10rem;
  background: linear-gradient(#eff6ff, #bfdbfe);
}
.caption {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  right: 1rem;
  margin: 0;
  padding: 0.5rem;
  background: white;
}

Values and defaults

The initial value is auto and the property is not inherited. Lengths, negative values, and percentages are accepted. Percentage bottom uses the containing block’s height. Auto resolves from other constraints or the static position rather than simply becoming zero.

Static boxes ignore bottom. Sticky uses it as a sticky constraint, which does not magically move a normally top-placed item to the bottom of a scrollport. Fixed normally refers to the viewport but certain ancestors can establish its containing block. Anchor functions have separate prerequisites and support.

Why top takes precedence

A non-replaced absolute box can stretch between top and bottom when its height is auto. A definite height can overconstrain that pair, with top generally taking precedence. Relative top also wins a conflicting bottom offset.

Absolute captions can cover content when text grows. Keep essential information in normal flow when a fixed frame cannot accommodate it. Learn top, inset, and position.

Sources and browser support

MDN: bottom describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.

Positioning details explain containing blocks and inset constraints.