A virtualized table needs a sticky header row that stays visible while the body rows are windowed and absolutely positioned via `transform: translateY(...)`. A developer puts the header inside the same scrolling/relative container as the virtualized rows and gives it `position: sticky; top: 0`. It works in isolation but the header sometimes disappears behind rows when scrolling. What is the typical cause?
<div style={{ height: 400, overflow: 'auto', position: 'relative' }}>
<div style={{ position: 'sticky', top: 0 }}>Header</div>
{virtualItems.map((v) => (
<Row style={{ position: 'absolute', transform: `translateY(${v.start}px)` }} />
))}
</div>