Support absolutely positioned anchors (not just top layer)

[xiaochengh]

Hi Oddbird,

There's recently a major change to the anchor finding algorithm:

1. An element can use absolutely positioned anchors that come earlier in tree order
2. When there's a name conflict, we should use the last one instead of the first one

Please see https://github.com/w3c/csswg-drafts/issues/8165 (especially comments after https://github.com/w3c/csswg-drafts/issues/8165#issuecomment-1469912952) for more details about this change.

[ayoreis]

This would be really useful for me (btw awesome polyfill and thank you for it!)

Context: Using it for sidenotes like here.

[jgerigmeyer]

@xiaochengh From what I can see, the WPT anchor-position-top-layer-005 test is still asserting that "Non-top-layer element cannot anchor to top-layer element". Shouldn't that be valid, since the anchor precedes the target in tree order? Or am I misunderstanding this section of the current spec?

If el has the same containing block as query el, then either el is not absolutely positioned, or el precedes query el in the tree order.

Thanks!

[jgerigmeyer]

cc @mfreed7 in case you have any guidance here ☝️ -- thanks!

[mfreed7]

See this issue, which isn't exactly the same as the one in the test case, but the questions about "the tree" are the same:

https://github.com/w3c/csswg-drafts/issues/10419

The major point is that "tree order" in the CSS spec doesn't refer to the DOM tree, it's the layout/box tree. What matters is that the anchor element gets laid out first, and the anchored/positioned element gets laid out after that. As long as that's the case, anchor pos should work.

[jgerigmeyer]

@mfreed7 Thanks! That's very helpful.

@jamesnw It seems like we should open a new issue to respect tree order instead of DOM order.

[jamesnw]

👍 I opened https://github.com/oddbird/css-anchor-positioning/issues/209