But One other Anchor Positioning Quirk

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, nevertheless it does fill a positioning hole that has been lacking for many years. As superior as I believe it’s, CSS Anchor Positioning has lots of quirks, a few of that are the product of its novelty and others attributable to its distinctive approach of working. As we speak, I need to deliver 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 once I was studying about what different individuals have made utilizing Anchor Positioning, particularly this submit 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 spread slider that modifications colours whereas it progresses.

Wonderful by itself, nevertheless it’s attention-grabbing that he’s utilizing two goal components with the identical anchor title, every connected to its corresponding anchor, identical to magic. If this doesn’t appear as attention-grabbing because it appears to be like, 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 component and a goal component. The anchor is the component used as a reference for positioning different components, therefore the anchor title. Whereas the goal is an absolutely-positioned component positioned relative to a number of anchors.

An anchor and a goal may be nearly each component, so you may consider them as simply two div sitting subsequent to one another:

<div class=”anchor”>anchor</div>
<div class=”goal”>goal</div>

To begin, we first should register the anchor component in CSS utilizing the anchor-name property:

.anchor {
anchor-name: –my-anchor;
}

And the position-anchor property on an absolutely-positioned component attaches it to an anchor of the identical title. Nevertheless, to maneuver the goal across the anchor we want the position-area property.

.goal {
place: absolute;
position-anchor: –my-anchor;
position-area: high 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 concern. It limits the scope of anchors to a subtree so that every goal attaches appropriately. Nevertheless, 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 connected appropriately, once more, like magic.

What’s occurring?

Targets often connect to the final anchor on the DOM as a substitute of their closest anchor, however in our first instance, we noticed two anchors with the identical anchor-name and their corresponding targets connected. All this with out the anchor-scope property. What’s occurring?

Two phrases: Containing Block.

One thing to learn about Anchor Positioning is that it depends rather a lot on how a component’s containing block is constructed. This isn’t one thing inherently from Anchor Positioning however from absolute positioning. Absolute components are positioned relative to their containing block, and inset properties like high: 0px, left: 30px or inset: 1rem are simply shifting a component round its containing block boundaries, creating what’s known as the inset-modified containing block.

A goal connected to an anchor isn’t any totally different, and what the position-area property does beneath 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 component is the entire viewport, however it may be modified by any ancestor with a place apart from static (often relative). Temani takes benefit of this reality and creates a brand new containing block for every slider, to allow them to solely be connected to their corresponding anchors. In case you snoop across the code, you will discover it initially:

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, abruptly they’re all appropriately connected!

Yet 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 a substitute took benefit of how the containing block of absolute components is computed. Nevertheless, there’s yet one more method, one which doesn’t want any further bits of code.

This occurred to me once I was additionally experimenting with Scroll-Pushed Animations and Anchor Positioning and making an attempt to connect text-bubble footnotes on the facet of a submit, like the next:

Logically, every footnote could 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 consequence: all of the targets would pile up on the final anchor:

This might be solved utilizing our prior method of making a brand new containing block for every be aware. Nevertheless, there’s one other route we are able to take, what I name the reductionist technique. The issue comes when there’s multiple anchor with the identical anchor-name, so we are going to cut back the variety of anchors to at least one, utilizing a component that would work because the frequent anchor for all targets.

On this case, we simply need to place every goal on the perimeters of the submit so we are able to use the whole physique of the submit 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 may higher test the way it was carried out on the unique submit!

Conclusion

The anchor-scope could also be the newest CSS property to be shipped to a browser (up to now, simply in Chrome 131+), so we are able to’t count on its help to be one thing out of this world. And whereas I’d love to make use of it each now and there, it is going to stay certain to quick demos for some time. This isn’t a motive to restrict the usage of 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.

But One other Anchor Positioning Quirk initially revealed on CSS-Tips, which is a part of the DigitalOcean household. You need to get the publication.