Bram.us
Read post

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

Chrome 148 introduces a long-awaited CSS improvement: `position: sticky` now tracks the nearest scrolling container per axis independently. This solves the classic problem of data tables needing both a sticky header (vertical axis) and a sticky first column (horizontal axis) simultaneously. Previously, wrapping a table in an `overflow-x: auto` container caused the wrapper to become the sticky reference for both axes, breaking vertical stickiness. The fix requires using `overflow: auto clip` on the wrapper instead of `overflow-x: auto`, preventing the wrapper from becoming a vertical scroll container. Firefox and Safari do not yet support this feature, and CSS `@supports` detection isn't available yet, but a JavaScript-based feature detection snippet is provided.

    #css
Mar 30•5m read time•From bram.us
Post cover image
Table of contents
# The Situation# The Change# See it in action# An Important Detail: Watch your overflow# Browser Support# Feature Detection# Spread the word
277.4K Impressions
Bram.us's image
Bram.us

Bram.us, curated by Bram Van Damme, is a web development blog offering tutorials, guides, and insig...

137 Followers

•

2.3K Upvotes

Would you recommend this post?

Copy link
WhatsApp
Facebook
X
New Squad
  • © 2026 Daily Dev Ltd.
  • Guidelines
  • Explore
  • Tags
  • Sources
  • Squads
  • Leaderboard