top

top is a physical inset for positioned elements. Relative positioning uses it to shift a box from its original position. Absolute positioning uses it to measure the top margin edge from its containing block’s top padding edge.

Relative movement is downward

Top:16px moves this relative box down without moving the following paragraph’s normal position. A negative value would move the box up.

<div class="box">top: 16px</div>
<p>Following content is still in normal flow.</p>

.box {
  position: relative;
  top: 16px;
  padding: 0.5rem;
  background: #dbeafe;
}
p {
  margin-block: 1.5rem;
}

A sticky heading with a real scrollport

Scroll the region. The heading’s top:0 keeps its top at the scrollport edge while its containing section continues, rather than measuring from an arbitrary parent’s top.

<section class="scroll" tabindex="0" aria-labelledby="steps">
  <h2 id="steps">Steps</h2>
  <p>Read the code.</p>
  <p>Change a value.</p>
  <p>Try a narrow width.</p>
  <p>Check keyboard behavior.</p>
</section>

.scroll {
  height: 150px;
  overflow: auto;
  border: 1px solid #94a3b8;
}
h2 {
  position: sticky;
  top: 0;
  margin: 0;
  padding: 0.5rem;
  background: #dbeafe;
  font-size: 1rem;
}
p {
  padding: 0.75rem;
}

Values and defaults

The initial value is auto and the property is not inherited. Lengths, percentages, and negative values are useful. Percentages use containing-block height, not the positioned element’s own height. Auto resolves against other constraints or the static position.

Static boxes ignore top. A fixed box usually uses the viewport; transforms and certain other ancestor features can establish its containing block instead. Absolute boxes commonly use a positioned ancestor, but “the parent” is not a universal rule. Anchor-positioning functions require extra setup and individual support checks.

Opposite offsets and sticky failures

A non-replaced absolute box with auto height can stretch between top and bottom. A definite height can overconstrain the pair; top generally takes precedence. For relative boxes, top wins a conflicting bottom shift.

Sticky requires a non-auto inset, room to move, and the intended scrollport. Overflow on an ancestor can redirect that relationship. Learn bottom, position, and overflow.

Sources and browser support

MDN: top 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.