Flexbox Card
This card shares its row with the card beside it.
This sentence is hidden with display: none.
Two-Card Flexbox Layout
Grid Card
These small items use a two-column grid.
One
Two
Three
Four
Keep scrolling
You're scrolling past this content right now, and the header above is staying put — that's position: sticky at work. It behaves like a normal element until it hits its top: 0 threshold, then it locks in place and holds while the rest of the page moves underneath it.
This is different from position: fixed, which anchors to the viewport from the moment the page loads and never moves at all. Sticky only kicks in once you scroll far enough for it to matter — the rest of the time it just sits in normal document flow like any other element.
It's also different from position: static, the default every element starts with. Static elements just flow top to bottom with everything else and never anchor to anything.
Sticky positioning is scoped to its nearest scrolling ancestor — in this case, the whole page — so the header sticks relative to the browser window, not to some smaller inner container.
Once you reach the footer below, the header will simply run out of page to stick to and scroll away with everything else, since there's nothing left underneath it to hold its position against.