position

position chooses how a box is placed and whether it reserves space in normal flow. Offsets such as top and left have different meanings for each positioning mode.

Relative keeps its original space

The middle box moves 12px down and right. Its original slot remains reserved, so the following paragraph does not move down to accommodate the shifted box.

<div class="box">Before</div>
<div class="box moved">Relative offset</div>
<p>Following content stays in normal flow.</p>

.box {
  padding: 0.5rem;
  background: #dbeafe;
  margin-block: 0.5rem;
}
.moved {
  position: relative;
  top: 12px;
  left: 12px;
  background: #bfdbfe;
}

A header that actually sticks while scrolling

Scroll this bounded, keyboard-focusable region. The heading stays at its top while the remaining content moves, until its containing block ends.

<section class="scroll" tabindex="0" aria-labelledby="topic">
  <h2 id="topic">Practice steps</h2>
  <p>Read the source.</p>
  <p>Change a value.</p>
  <p>Compare the result.</p>
  <p>Try a smaller screen.</p>
  <p>Check the reading order.</p>
</section>

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

Values and containing blocks

The initial value is static and the property is not inherited. Static follows normal flow and ignores inset offsets. Relative preserves its flow space and shifts its painted box. Absolute and fixed are removed from flow, so neighboring content does not reserve room for them.

Absolute positioning commonly uses the padding box of the nearest positioned ancestor. Transforms, containment, and other features can also establish a containing block. Fixed usually uses the viewport, but certain ancestors, including transformed ones, can capture it. In an example iframe, the viewport is that iframe’s viewport.

Sticky stays in flow and is constrained by its containing block and nearest scrollport. It needs a non-auto inset on the intended axis and room to move; overflow on an ancestor can change which scrollport it uses. It is not simply fixed positioning switched on at a magic threshold.

Common mistakes

A clipped, non-scrolling parent cannot demonstrate ordinary sticky scrolling. A simulated absolute box does not teach real fixed behavior. Sticky was not supported by Internet Explorer 11; check individual mode support rather than claiming every old browser supports all modes.

Test positioned content at large text sizes so it does not cover text or controls. Learn inset, z-index, overflow, and transform next.

Sources and browser support

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