[css-anchor-1] How it should work with position: fixed?

[kizu]

Disclaimer and additional links

I'm submitting my feedback following my experiments with the current implementation of anchor positioning in Chrome Canary.

I wrote an article about my experiments, but decided to fill most of my feedback as separate issues here.

A quick summary of related links:

• anchor positioning specs
• my article with the experiments

I saw the position: fixed mentioned a few places in the spec examples:

• https://drafts.csswg.org/css-anchor-position-1/#example-fcdb8337
• https://drafts.csswg.org/css-anchor-position-1/#example-fcdb8337

But outside of them, it is not mentioned anywhere in the spec.

Should the spec define how it should be handled?

I did not yet do almost any experiments with anchors and fixed positioning, would update this issue when would do — but would be awesome to hear what would be the intended behavior.

[kizu]

In the discussion of #8588 (and some tests inside of it) it seems that the intent of the position: fixed is to promote the element to the root layer, allowing for it to be attached to basically any elements as if it was not constrained by its parents with defined position etc.

[tabatkins]

There's not really anything to mention, is the thing. The spec just cares about containing blocks and their relationships, and fixpos is just as well-defined in this regard as abspos is. (Note that the term "absolutely positioned", used a lot in the spec, refers to both abspos and fixpos elements, if you click thru the link to its definition.)

The big useful thing is that, since fixpos elements are laid out after pretty much the entire rest of the page, the conditions for what is an acceptable anchor are pretty trivially satisfied, so you can anchor it to pretty much anything. (Except another fixpos.)

[kizu]

The big useful thing is that, since fixpos elements are laid out after pretty much the entire rest of the page, the conditions for what is an acceptable anchor are pretty trivially satisfied, so you can anchor it to pretty much anything. (Except another fixpos.)

I would say that this can be a very helpful thing to mention, maybe as a note or something in the spec — could help people who are learning about the feature to understand it better, and can be a useful example, maybe somewhere around the “acceptance criteria” which are currently very dense and can be hard to wrap your head around, as it requires you to get the meaning of all the terms that are used there. Having an example with the fixed position which can “escape” those limitations in some way could be maybe a nice way to present it?

I mean, I see how when going through all the linked terms it is possible to get the whole picture, but I'm just a fan of having useful parts be explicit, and I feel like this is something that could be worth repeating/mentioning.

[o-t-w]

Should it be possible to position a fixed-position element in one direction by referencing the viewport but in the other direction using anchor positioning? It doesn't work in Chrome Canary at the moment but it would be useful e.g.:

.anchored {
  position: fixed;
  left: anchor(right);
  top: 0;
}

Look at the Shift example on the Floating UI JavaScript library homepage for a look at the sort of thing I mean.