📝 CSS-Tricks 191: Slideout Footer, Nice Patterns, and Isolation

[Robin]: One of the niftiest layout effects I’ve seen in quite a while has to be the footer that slides out from the bottom of The Markup. Chris calls this technique The Slideout Footer, and in that post, he looks into how they made this simple but rather lovely thing:

Here’s the trick:

1. The main content area is at least 100vh tall. Most sites are anyway, but just to be safe.
2. The main content area has a solid background as well, which covers the footer we’re going to hide behind it.
3. The footer comes after the main content area in the HTML, so to make sure the main content area sits on top, you’ll need a little relative positioning and z-index.
4. The footer uses sticky positioning to place itself on the bottom.