This parent container is only
h-48
. Since there's no overflow/scroll *within this parent*, the "sticky" element above won't appear to stick relative to the overall page scroll. It sticks only to the top of *this gray box* if this box itself were to scroll.
Observation: The yellow bar will not stick to the top of the browser window as you scroll the main page, because its direct parent (the gray box) is not tall enough to have its own scrollbar that would reveal the sticky behavior.
This parent container is
h-96
and has
overflow-y-auto
. Now, scroll *inside this gray box*.
Observation: The green bar sticks to the top of *this gray box* as you scroll within it.
This uses `sticky top-0` and its parent is the `body` (or a large div wrapping content).
This purple header is sticky to the top of the browser viewport when the page scrolls because its parent (ultimately the body or a main wrapper) is tall enough for the page to scroll.