[css-position-3] New container-fixed value for position within a @container

[brandonmcconnell]

With the growing support for @container, it’d be cool if CSS added a new position value to make an element fixed within the context of its container.

The main workaround for this I've used thus far is to position an element absolute within its parent with the top value offset by the current scroll distance of its parent.

We can certainly bikeshed on the value name a bit more as container-fixed is a bit verbose, but that's the general idea.

[SYwaves]

I'm having difficulty envisioning how this would work. It feels like this would be the same as establishing the container as a containing block for fixed positioning, but for a descendant item specifically. In practice, it would be the same as absolute positioning.

[brandonmcconnell]

@SYwaves The same as absolute positioning if the container had a sibling element to the absolute element in its first level that was a scrollable box. Otherwise, an absolute position won't appear "fixed" as the user scrolls in the container.

That approach also necessitates that the absolute element appears on the container's top level (under its relative position, as other elements may also use relative positioning) vs. being any arbitrary number of layers deep as fixed positioning usually supports.

[SYwaves]

Oh, it's something to the effect of background-attachment: scroll, where the fixed thing is attached relative to the border of the container itself?

[bramus]

Also see #7475, specifically #7475 (comment) where I suggested an extension to position: fixed that indicate where something is fixed against.

Fitting things into my proposed syntax, your proposal would become position: fixed / container;

[xiaochengh]

Looks like another use case of the position-container proposal (#9868)

[brandonmcconnell]

@xiaochengh Yes, perhaps an extension