A gentle introduction to anchor positioning

46 feross 11 8/12/2025, 10:18:55 PM webkit.org ↗

Comments (11)

falcor84 · 2h ago
As mentioned at the end of TFA, Codepip's Anchoreum is an excellent way of learning this.

[0] https://anchoreum.com/

xswhiskey · 55m ago
It being available on WebKit makes me hopeful for general adoption then.
rtkwe · 1h ago
I was expecting boat anchors haha.
pupppet · 3h ago
Any day now, Firefox.

No comments yet

efilife · 3h ago
Do we really need this? Why won't position: absolute and setting top/left/bottom/right suffice?
adamschwartz · 2h ago
It solves many of the pain points Tether[0] tried to solve.

For example it helps when the anchoring element is inside of an oveflow hidden/scroll container, but geometrically you need the tethered element to sit/extend outside of the container (so—for now at least—its DOM node needs to be outside of the container).

[0] https://tetherjs.dev

cyral · 17m ago
This always results in a ton of hacky JS to detect how the element should reposition itself if it overflows the screen (depending on the content and screen size)
RobRivera · 1h ago
Anchor post
danielvaughn · 3h ago
Anchor positioning sounds cool, but I ran into some very unintuitive behavior when I tried to use it. Can’t remember the details, it was a couple years ago.
bombcar · 3h ago
My problem is always been on sites that have a menu or something similar at the top. The anchor always inevitably goes to the very top of the screen gets covered by whatever menu it is.
chiefalchemist · 1h ago
Isnt there something like scroll-padding or scroll-margin? More or less an offset you can set so that doesn’t happen