Yet Another Anchor Positioning Quirk

CSS anchor positioning: a surprising feature, but there are some tricky problems. While not a game-changer like Flexbox or Grid, it fills the gap in CSS positioning for decades. However, it also has some unique characteristics that lead to some puzzling behavior. This article will explore an anchor positioning problem that has troubled me for a long time.

Origin

I discovered this problem a month ago while reading someone else’s case of anchor positioning, especially Temani Afif’s article on “Anchor Positioning and Scroll-Driven Animation”. We strongly recommend reading this article to see what caught my attention. He cleverly combines anchor positioning and scroll-driven animations to create a range slider that also changes color as progress changes.

What's even more amazing is that he uses two target elements with the same anchor name, each element attached to its corresponding anchor point, like magic. If this doesn't seem that interesting, then we should briefly review how anchor positioning works.

CSS anchor positioning and anchor-scope attribute

Please refer to our complete CSS anchor positioning guide for more in-depth understanding.

Anchor positioning brings two new concepts to CSS: Anchor point element and target element. An anchor is a reference element used to locate other elements. The target element is an element that is absolutely positioned relative to one or more anchor points.

Anchors and targets can be almost any element, you can think of them as two divs placed side by side:

<code><div>anchor</div>
<div>target</div></code>

First, we have to register the anchor element in CSS using the anchor-name attribute:

<code>.anchor {
  anchor-name: --my-anchor;
}</code>

Then, use the position-anchor attribute on the absolutely positioned element to attach it to an anchor point with the same name. However, to move the target around the anchor point, we need the position-area attribute.

<code>.target {
  position: absolute;
  position-anchor: --my-anchor;
  position-area: top right;
}</code>

This works well, but if we change the marker to include more anchors and targets, the situation becomes complicated:

<code></code>

• anchor 1
  target 1
• anchor 2
  target 2
• anchor 3
  target 3

The target element is not attached to its nearest anchor point, but is all piled up on the last registered anchor point in the DOM.

The

anchor-scope attribute was introduced in Chrome 131 to solve this problem. It limits the scope of anchor points to subtrees so that each target is properly attached. However, I don't want to pay attention to this property, because what caught my attention initially was that Temani was not using it . For some reason, all targets are attached correctly, again like magic.

What happened?

The

target is usually attached to the last anchor in the DOM, not its nearest anchor, but in our first example we see two anchors with the same anchor-name and their corresponding additional targets. All of this does not use the anchor-scope attribute. what happened?

Two words: Contains block.

It should be noted about anchor positioning that it depends to a large extent on how elements contain blocks are built. This is not an inherent characteristic of anchor positioning itself, but an absolute positioning characteristic. An absolutely positioned element is positioned relative to its containment block, while margin attributes like top: 0px, left: 30px or inset: 1rem simply move elements around the boundary of the containing block, creating the so-called modified inclusion block .

The target attached to the anchor is no different. What the position-area attribute does at the bottom is to change the target's margins and the modified include block is to make it next to the anchor.

Usually, the containing block of an absolute positioning element is the entire viewport, but can be changed by any position attribute that is not static's ancestor element (usually relative). Temani takes advantage of this fact to create a new include block for each slider so they can only be attached to their corresponding anchor points. If you look at the code, you can find it at the beginning:

<code><div>anchor</div>
<div>target</div></code>

If we use this strategy in the previous example, they will suddenly be attached correctly!

Another question

Instead of using the anchor-scope attribute to attach each anchor to its respective target, we take advantage of how to calculate the containing block of absolute elements. However, there is another way, without any extra code required.

I discovered this when I experimented with scrolling drive animation and anchor positioning at the same time and tried to attach a text bubble footnote to the side of the post, like so:

Logically, each footnote is a goal, but the choice of anchor points is a bit tricky. I initially thought each paragraph could be used as an anchor, but that means there will be multiple anchors with the same anchor-name. Result: All targets will be stacked on the last anchor:

This can be solved by our previous method of creating a new containing block for each comment. However, we can take another approach, which I call the reductionist approach. The problem arises when there are multiple anchors with the same anchor-name, so we reduce the number of anchors to one, using an element that can be a common anchor for all targets.

In this case we want to position each target only on both sides of the post, so we can use the entire body of the post as an anchor, and since each target is naturally aligned on the vertical axis, all that is left is to move them along the horizontal axis:

You can better check how the original post was done!

Conclusion

anchor-scope Probably a CSS property recently released to the browser (so far, only in Chrome 131), so we can't expect its support to exceed expectations. While I would love to use it anytime, anywhere, it will remain limited to short demos for a while. This is not a reason to limit the use of other anchor positioning properties, which are supported in Chrome 125 and later (and hopefully in other browsers in the near future), so I hope these minor issues can help you continue to use anchor positioning without any worries.

The above is the detailed content of Yet Another Anchor Positioning Quirk. For more information, please follow other related articles on the PHP Chinese website!