Aaron In MinnesotaApr 1
Bramus

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain: the reality was that only one of both would stick.

A recent change to CSS fixes this: `position: sticky` now plays nice with _single-axis scrollers_.

https://www.bram.us/2026/03/30/css-sticky-per-axis/

CSS position: sticky now sticks to the nearest scroller on a per axis basis!

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick. A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148 with the experimental web platform features flag flipped.

Bram.us
Mar 30 at 12:30pmWeb
Show threadŠime VidasMar 31

@bramus

> To make the wrapper scroll horizontally, you might instinctively reach for overflow-x: scroll (or auto). However, doing so will actually break the vertical stickiness we just achieved!

The overflow properties are such a mine field. Many dev hours will continue to be spent figuring out why sticky does not work as intended. Maybe DevTools could help by warning when a overflow declaration prevents a sticky value from working.

Show threadJan van Hellemond Mar 31
@bramus Hallefrickinlujah!