I strongly imagine Anchor Positioning will go down as one of many best additions to CSS. It might not be as game-changing as Flexbox or Grid, however it does fill a positioning hole that has been lacking for many years. As superior as I believe it’s, CSS Anchor Positioning has a number of quirks, a few of that are the product of its novelty and others as a consequence of its distinctive means of working. As we speak, I need to convey you yet one more Anchor Positioning quirk that has bugged me since I first noticed it.
The inception
It began a month in the past after I was studying about what different individuals have made utilizing Anchor Positioning, particularly this publish by Temani Afif about “Anchor Positioning & Scroll-Pushed Animations.” I strongly encourage you to learn it and discover out what caught my eye there. Combining Anchor Positioning and Scroll-Pushed Animation, he makes a variety slider that modifications colours whereas it progresses.
Wonderful by itself, however it’s fascinating that he’s utilizing two goal parts with the identical anchor title, every hooked up to its corresponding anchor, identical to magic. If this doesn’t appear as fascinating because it seems to be, we must always then briefly recap how Anchor Positioning works.
CSS Anchor Positioning and the anchor-scope property
See our full CSS Anchor Positioning Information for a complete deep dive.
Anchor Positioning brings two new ideas to CSS, an anchor aspect and a goal aspect. The anchor is the aspect used as a reference for positioning different parts, therefore the anchor title. Whereas the goal is an absolutely-positioned aspect positioned relative to a number of anchors.
An anchor and a goal will be virtually each aspect, so you’ll be able to consider them as simply two div sitting subsequent to one another:
<div class="anchor">anchor</div>
<div class="goal">goal</div>To start out, we first should register the anchor aspect in CSS utilizing the anchor-name property:
.anchor {
anchor-name: --my-anchor;
}And the position-anchor property on an absolutely-positioned aspect attaches it to an anchor of the identical title. Nonetheless, to maneuver the goal across the anchor we’d like the position-area property.
.goal {
place: absolute;
position-anchor: --my-anchor;
position-area: prime proper;
}This works nice, however issues get difficult if we alter our markup to incorporate extra anchors and targets:
<ul>
<li>
<div class="anchor">anchor 1</div>
<div class="goal">goal 1</div>
</li>
<li>
<div class="anchor">anchor 2</div>
<div class="goal">goal 2</div>
</li>
<li>
<div class="anchor">anchor 3</div>
<div class="goal">goal 3</div>
</li>
</ul>As an alternative of every goal attaching to its closest anchor, all of them pile up on the final registered anchor within the DOM.
The anchor-scope property was launched in Chrome 131 as a solution to this problem. It limits the scope of anchors to a subtree so that every goal attaches accurately. Nonetheless, I don’t need to give attention to this property, as a result of what initially caught my consideration was that Temani didn’t use it. For some motive, all of them hooked up accurately, once more, like magic.
What’s occurring?
Targets normally connect to the final anchor on the DOM as an alternative of their closest anchor, however in our first instance, we noticed two anchors with the identical anchor-name and their corresponding targets hooked up. All this with out the anchor-scope property. What’s occurring?
Two phrases: Containing Block.
One thing to find out about Anchor Positioning is that it depends loads on how a component’s containing block is constructed. This isn’t one thing inherently from Anchor Positioning however from absolute positioning. Absolute parts are positioned relative to their containing block, and inset properties like prime: 0px, left: 30px or inset: 1rem are simply shifting a component round its containing block boundaries, creating what’s referred to as the inset-modified containing block.
A goal hooked up to an anchor isn’t any totally different, and what the position-area property does underneath the desk is change the goal’s inset-modified containing block so it’s proper subsequent to the anchor.
Normally, the containing block of an absolutely-positioned aspect is the entire viewport, however it may be modified by any ancestor with a place aside from static (normally relative). Temani takes benefit of this truth and creates a brand new containing block for every slider, to allow them to solely be hooked up to their corresponding anchors. If you happen to snoop across the code, you will discover it at first:
label {
place: relative;
/* No, It isn't ineffective so do not take away it (or take away it and see what occurs) */
}If we use this tactic on our earlier examples, all of the sudden they’re all accurately hooked up!
One more quirk
We didn’t want to make use of the anchor-scope property to connect every anchor to its respective goal, however as an alternative took benefit of how the containing block of absolute parts is computed. Nonetheless, there may be yet one more strategy, one which doesn’t want any additional bits of code.
This occurred to me after I was additionally experimenting with Scroll-Pushed Animations and Anchor Positioning and attempting to connect text-bubble footnotes on the facet of a publish, like the next:
Logically, every footnote can be a goal, however the alternative of an anchor is a bit more tough. I initially thought that every paragraph would work as an anchor, however that might imply having multiple anchor with the identical anchor-name. The outcome: all of the targets would pile up on the final anchor:
This may very well be solved utilizing our prior strategy of making a brand new containing block for every observe. Nonetheless, there may be one other route we will take, what I name the reductionist technique. The issue comes when there may be multiple anchor with the identical anchor-name, so we’ll scale back the variety of anchors to at least one, utilizing a component that would work because the widespread anchor for all targets.
On this case, we simply need to place every goal on the edges of the publish so we will use your entire physique of the publish as an anchor, and since every goal is of course aligned on the vertical axis, what’s left is to maneuver them alongside the horizontal axis:
You possibly can higher examine the way it was performed on the unique publish!
Conclusion
The anchor-scope could also be the latest CSS property to be shipped to a browser (to this point, simply in Chrome 131+), so we will’t anticipate its assist to be one thing out of this world. And whereas I’d love to make use of it each now and there, it’s going to stay certain to brief demos for some time. This isn’t a motive to restrict using different Anchor Positioning properties, that are supported in Chrome 125 onwards (and let’s hope in different browsers within the close to future), so I hope these little quirks may also help you to maintain utilizing Anchor Positioning with none worry.
