CSS positioning: keep sticky controls inside their scroll boundary

How the rule works

A long incident record keeps a compact section navigation available while the article scrolls. Its sticky top offset clears the fixed site header. This works only if the element's scroll container and available space permit it; an ancestor with overflow behavior can change where it sticks. On a narrow viewport, the navigation returns to ordinary flow so it does not consume most of the visible page. The links remain ordinary anchors either way. Do not position an error message over form fields or rely on visual overlap to convey priority.

.incident-index { position: sticky; top: 4.5rem; align-self: start; }
@media (max-width: 50rem) {
  .incident-index { position: static; }
}

Cost and verification

Sticky positioning adds no extra asset, though moving layers may increase paint work on a complex page. Test the actual containing block, short viewports, browser zoom, and focus navigation through the index. A fixed header can obscure fragment targets; scroll-margin-block-start on targets may be needed. Keep the top offset synchronized with the real header height rather than guessing from a screenshot.

Common Mistakes

• Do not expect sticky to work against every ancestor overflow setting.
• Do not cover focused content with a fixed or sticky bar.
• Do not use absolute positioning to reorder a logical article.

Connected lessons

• CSS Layout
• CSS stacking contexts: debug overlays without arbitrary z-index inflation
• Responsive CSS: keep reading order and controls usable
• HTML skip link: reach main content before repeated navigation

Related behavior decisions

• CSS anchor positioning: place a hint beside its control