A gentle introduction to anchor positioning (webkit.org)

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.

Any day now, Firefox.

Do we really need this? Why won't position: absolute and setting top/left/bottom/right suffice?

As mentioned at the end of TFA, Codepip's Anchoreum is an excellent way of learning this.

[0] https://anchoreum.com/

I was expecting boat anchors haha.

Anchor post

It being available on WebKit makes me hopeful for general adoption then.

Unless there is a polyfill for Firefox, it will be at least a couple of years before you can rely on this for public sites.

`position-area` syntax feels a little tough to remember, but I'm glad top/right/bottom/left is still available.

Would be cooler if the whole system were more flexible: you simply define 2 anchor points (one on the target, another on the source, so center bottom would be bottom width 50% and top width 50%) instead of being limited to the 9 predefined areas

I need a tooltip, with a pointer; but it seems that the current state of the spec does not allow for pointers; and most explainers studiously avoid this use case, as if this isn't a lion's share of what people do with anchored floating boxes.

At this point I'm just counting on LLMs to remember all the CSS specification cruft for me.