[css-anchor-position-1] Could anchor positioning work for defining the targets of sticky elements?

Not to confuse with https://github.com/w3c/csswg-drafts/issues/8448 where we would want to attach things to sticky elements and use their current sticky offset, but kinda the other way around:

What if when we had an element with position: sticky; we could use anchor() for its inset properties?

We can imagine that right now, when we set

position: sticky;
top: 10px;

we virtually anchoring our element to the max() of either the nearest ancestor scroll container’s scrollport + 10px, and its containing block.

In pseudo-code we could express this as if it was

position: sticky;
top: max(anchor(scrollport top) 10px, anchor(containing-block top));

Now, there are a lot of issues with the current sticky positioning, both for cases when we're limited by the containing block, and when we're limited by a stray overflow: auto that we want to ignore (these issues make us use portalled elements to the end of the body in production, as we cannot rely on position: sticky due to the possible wrappers that break it).

After playing a bit with anchor positioning, I think that it could be a very elegant way to solve this maybe?

What if when we'd use the achor() in inset properties for a sticky element we would essentially “ignore” the current way it handles the corresponding property (the fact that it uses two different wrappers to determine the offset), but would just use what we would give it?

This way we could potentially “skip” any wrappers, like when we would want to only target a specific parent with overflow: auto, and we could also “skip” any extra wrapper divs that could go over our sticky element (like inside grids, and so on).

Main issue I see is that we could actually want to target the scrollports in a lot of cases, and not just the elements, not sure what would be the best way to handle this.

But, overall, given that, in theory, we should be free to modify the offsets of the sticky elements based on other things similarly to how we can absolutely position things in a safe way, maybe we could reuse the anchors this way?

(originally posted in https://github.com/w3c/csswg-drafts/issues/2496)

Specs:

• anchor positioning
• sticky positioning

Start by reading the CSS Anchor Positioning and CSS Position sticky-positioning specifications, then compare this proposal with issues 8448 and 2496. Clarify whether anchor() should control sticky insets, how scrollports would be targeted, and which wrappers should be ignored; done means a resolved behavior proposal suitable for specification discussion.