Comparison
Absolute positioningvsSticky positioning
Absolute positioning
you took the element out of the flow and everything after it moved up to fill the gap.
Removing an element from normal flow and placing it against its containing block, so it no longer affects the size or position of anything else. It is the right tool for overlays and decorations that must not disturb the layout, and the wrong one for anything whose size depends on content, because the parent can no longer grow to fit it. The `position: relative` on the parent, which does nothing visible on its own, exists purely to become that containing block.
Full entry →Sticky positioning
the heading scrolls with the page until it reaches the top, then stays there until its section ends.
A hybrid that behaves as relative until a scroll threshold is crossed and as fixed after it, bounded by the nearest scrolling ancestor. It needs an offset — a `top` value with no unit at all does nothing — and it silently fails if any ancestor has `overflow: hidden` or `auto`, which is the reason nine out of ten sticky bugs happen. It sticks within its parent, so a short parent ends the effect early.
Full entry →