Sticky Gotcha & Fixed Element Demo

Demonstrating `sticky` Gotcha

sticky elements only stick within their direct parent's scrollable area. If the parent isn't tall enough or doesn't scroll, the sticky behavior won't be apparent for that parent.

Parent A (Not Tall Enough for Sticky Effect)

I am 'sticky top-0' inside Parent A.

This parent (yellow box) is short. If you scroll the main page, I won't stick relative to the *viewport* because my parent isn't the main scrolling container for that purpose. I only stick relative to Parent A's content, but Parent A has very little content to scroll past me.

Parent B (Tall Enough & Scrollable)

I am 'sticky top-0' inside Parent B.

Scroll down *inside this green box*. You'll see me stick to the top of *this green box*.

Placeholder content...
More placeholder content...
Even more placeholder content to ensure scrolling within Parent B.

Demonstrating `fixed` Positioning

I am a `fixed top-0 left-0 w-full` header.

Content Area Below Fixed Header

This content would be partially hidden by the `fixed` purple header if we didn't add `pt-20` (padding-top) to this container. `fixed` elements are removed from the normal document flow.

Content Block 1 to make page scrollable.
Content Block 2.
Content Block 3.
Content Block 4.
Content Block 5.
`fixed bottom-5 right-5` (e.g., for a chat button)