The Big Gotcha of Anchor Positioning
The Big Gotcha of Anchor Positioning êŽë š
Alternate Titles:
- âSomethingâs Rotten in The Consortiumâ
- âItâs Batpoop Crazy Easy To Break Anchorsâ
I feel like an idiot, because Iâm very guilty of telling people that one of the amazing benefits of Anchor Positioning in CSS is that you can position elements relative to other elements regardless of where they are in the DOM. Itâs that italic, regardless, thatâs the problem.
No, Chris, you canât. Sorry about that. There are a bunch of limitations which can feel quite inscrutable at first. New types of problems that, to my knowledge, havenât existed quite like this in CSS before.
Hereâs a little rant about it:
Note
Iâm trying to be dramatic there on purpose because I really do think that the CSS powers that be should do something about this. Iâm sure there are reasons why it behaves the way it does now, and Iâll bet a dollar that speed is a part of it. But itâs way too footgunny (as in: easy to do the wrong thing) right now. I gotta imagine the anchor-resolving part of the grand CSS machine could do a âsecond passâ or the like to find the anchor.
If youâre logged into CodePen, open this demo (chriscoyier) and move the DOM positions as I did in the video to see it happen.
Itâs Fixable.
Itâs a smidge convoluted that Iâd move the tooltip before the anchor, I suppose. You can just: not do that. But itâs symbolic that you canât just do whatever you want with DOM placement of these things an expect it to work.
Temani Afif has a good article about all this, which has a strong callout that Iâll echo:
Note
The anchor element must be fully laid out before the element that is anchored to it.
So you have to be thinking about the position value quite a bit. There is almost a 100% chance that the element youâre trying to position to an anchor is position: absolute;. Itâs the anchor itself thatâs more concerning. If they are siblings, and the anchor has any position value other than the default static, the anchor has to come first. If they are in other positions in the DOM, like the anchor is a parent or totally elsewhere, you need to ensure they are in the same âcontaining blockâ or that the anchor parent still has that static positioning. Again, Temani has a deeper dive into this that explains it well.
James Stuckey Weber also has an article on this. His callout is a bit more specific:
Tips
For the best chance of having anchor positioning work, hereâs my recommendation:
- Make the anchor and the positioned element siblings.
- Put the anchor first in the DOM.
Part of me likes that simplified advice as itâs understandable and teachable.
A bigger part of me hates that. This is a weird new problem that CSS has given us. We havenât had to root out problems like this in CSS before and I donât exactly welcome a new class of troubleshooting. So again: I think CSS should fix this going forward if they can.
Tips
If youâre further confused by how to position things even if you have the anchor workingâŠ
- First, anchor-tool is very helpful to remember how the âspanâ thing works which Iâve yet to have fully sink into my briain.
- Second, the area youâre anchoring to is kinda like a grid cell, so you can
alignandjustifystuff inside of it. But where does this âcellâ occupy? Itâs called the Inset-Modified Containing Block (IMCB) and Bramus has a good explanation. Theinsetpart basically means shrinking it by pushing against the cell walls. Also IMCB is so weirdly close to ICBM, but I guess they can both blow you up.