Codectionary / Developer documentation / CSS

Sticky Positioning inside a Scroll Container

Sticky positioning keeps a box in normal flow while constraining its position relative to its scroll container and containing block.

What it is and why to use it

Sticky positioning keeps a box in normal flow while constraining its position relative to its scroll container and containing block. A non-auto inset provides the sticking threshold. It is useful for a small section heading that remains visible while its own panel scrolls.

Common mistakes and limitations

Ancestor overflow can change which scroll container controls sticking, and a container without enough scrolling room may show no effect. Sticky content can obscure focus targets or occupy too much space at zoom. Use a background and sufficient layout space deliberately.

Try the example

The example pairs editable CSS with its own HTML preview. Run it, then change one declaration at a time and compare the result. Locally, put the CSS in a style element in the document head or in an external stylesheet linked from the HTML. Feature support varies by browser and version; use the linked reference and a useful fallback where needed.

HTML used by this example

<div class="scroller"><h3 class="heading">Study plan</h3><div class="long">Scroll inside this panel to see the heading stick.</div></div>

Syntax

position: sticky; inset-block-start: 0;

Examples

Sticky Positioning inside a Scroll Container

Run the CSS against the supplied HTML, then experiment with the values.

.scroller { height: 10rem; overflow: auto; border: 1px solid #94a3b8; }
.heading { position: sticky; inset-block-start: 0; background: #dbeafe; color: #172b4d; margin: 0; padding: .5rem; }
.long { height: 20rem; padding: 1rem; }
  1. The fixed-height panel becomes the scroll container because content exceeds its height.
  2. The heading sticks at its block-start edge when scrolling reaches that threshold.
  3. It remains constrained by the surrounding layout rather than becoming a permanently fixed viewport overlay. This is useful for panel headers.
HTML used by this example
<div class="demo"><div class="scroller"><h3 class="heading">Study plan</h3><div class="long">Scroll inside this panel to see the heading stick.</div></div></div>

Best practices

  • Ancestor overflow can change which scroll container controls sticking, and a container without enough scrolling room may show no effect. Sticky content can obscure focus targets or occupy too much space at zoom. Use a background and sufficient layout space deliberately.
  • Inspect the relevant browser reference and test the browsers used by your audience.

Runtime & versions

Web browsers. Feature availability depends on the language and runtime version used by your project; consult the official reference below.

CSS specifications (modules)

Specifications & further reading