{"id":7640,"date":"2025-11-05T13:47:26","date_gmt":"2025-11-05T18:47:26","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=7640"},"modified":"2025-11-18T12:51:55","modified_gmt":"2025-11-18T17:51:55","slug":"the-weird-parts-of-position-sticky","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/the-weird-parts-of-position-sticky\/","title":{"rendered":"The Weird Parts of position: sticky;"},"content":{"rendered":"\n

Using position: sticky;<\/code> is one of those CSS features that’s incredibly useful, seemingly<\/em> simple, and also, frequently frustrating.<\/p>\n\n\n\n

The premise is simple: you want to be able to scroll your page’s content, but you want something to “stick” at the top (or anywhere). Frequently, this will be some sort of header content that you want to always stay at the top, even as the user scrolls, but it could be any sort of content (and stick edges other than the top, and at any offset).<\/p>\n\n\n\n

We’ll cover a brief introduction to sticky positioning. We’ll see how it works, and then we’ll look at some common, frustrating ways it can fail. Then we’ll learn exactly<\/em> how to fix it.<\/p>\n\n\n\n

For all the code examples I’ll be using Tailwind, and later, a little React\/JSX for looping. I know the Tailwind piece might be controversial to some. But for this post it\u2019ll allow me to show everything in one place, without ever requiring you, dear reader, to toggle between HTML and CSS.<\/p>\n\n\n\n

Making Content Stick<\/h2>\n\n\n\n

Let’s look at the simplest possible example of sticky positioning.<\/p>\n\n\n

<div<\/span> class<\/span>=\"h-[500px] gap-2 overflow-auto\"<\/span>><\/span>\n  <div<\/span> class<\/span>=\"flex flex-col gap-2 bg-gray-400 h-[300px]\"<\/span>><\/span>\n    <span<\/span>><\/span>Top<\/span<\/span>><\/span>\n    <span<\/span> class<\/span>=\"mt-auto\"<\/span>><\/span>Bottom<\/span<\/span>><\/span>\n  <\/div<\/span>><\/span>\n\n  <div<\/span> class<\/span>=\"sticky top-0 h-[100px] bg-red-300 mt-2 grid place-items-center\"<\/span>><\/span>\n    <span<\/span>><\/span>I'm sticky!<\/span<\/span>><\/span>\n  <\/div<\/span>><\/span>\n\n  <div<\/span> class<\/span>=\"flex flex-col bg-gray-400 h-[700px] mt-2\"<\/span>><\/span>\n    <span<\/span>><\/span>Top<\/span<\/span>><\/span>\n    <span<\/span> class<\/span>=\"mt-auto\"<\/span>><\/span>Bottom<\/span<\/span>><\/span>\n  <\/div<\/span>><\/span>\n<\/div<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n