Lemme set the stage a bit here.

You have a website and, like most, it scrolls.

This website will have modals. You’ll probably position: fixed the modal so that it’s predictably positioned regardless of scrolling. It’s possible the modal itself will scroll.

Notice the modal has a close button. We can position: absolute that in the upper-right corner, but if our modal scrolls, it’s a problem.

Should be a job for more position: fixed, right? Not really, sadly, as there is no such thing as a local context for position: fixed.

Well… actually there kinda (weirdly) is. If the modal has any sort of CSS transform on it (and it might already if you center it using the ol’ left: 50%; transform: translateX(-50%); trick) then the fixed position close button will come back home:

But… as the transform helped pull the close button back into place, you can see it behaves like position: absolute and not position: fixed. ¯_(ツ)_/¯

There is a possibility here, though. The idea is that position: sticky is, in a sense, a locally scoped position: fixed. If we position the close button at the top: 0 anyway, it’ll just stick there as the modal scrolls down.

I just thought this was an interesting possibility. Ultimately, to be honest, if I had modals I worried about scrolling, I’d probably have like a .modal-header container and a .modal-content container. The header would sit on top always and the container would be the thing that could scroll.

The post Sticky as a Local Fixed? appeared first on CSS-Tricks.