Re: [csswg-drafts] [css-anchor-position-1] `position-fallback-bounds` vs `position-container` (#9868)

Being able to select the containing block would be very useful for sticky positioning. 

The element that needs to be sticky might also require a layout that depends on a certain structure. Since the containing block for a sticky element is its nearest block level ancestor, this creates a paradox. The structure that is required for having the correct sticky bounds excludes the structure required for the intended layout.

One example where this is an issue is a menu where only some menu elements should be sticky. 

In the screenshot below, the search element should be sticky. It must be a part of the menu container, as it should participate in layout with the other menu elements. Unfortunately, that prevents it from being visually shifted within the page as the menu now becomes its containing block.

![image](https://github.com/user-attachments/assets/82d0ae88-4ded-4297-a64e-3da9d1d6d58a)


A `position-container` property that allows you to select a different containing block in the containing block chain would help here: 

```css
position-container: --main;
```

Another example is a list of fragment links that are introduced in a section of an article. The article has multiple sections, and the links appear in the introduction section. 

![image](https://github.com/user-attachments/assets/be074bb1-8594-4c93-ab13-a967288b82b2)

At the moment, the links can only be shifted around within the section they descend from, while a `position-container` property hopefully would allow you to select the article as the containing block: 

```css
position-container: --article;
```

Being able to  select the containing block, and being able to configure the insets from that containing block (https://github.com/w3c/csswg-drafts/issues/10754) would solve many of the issues highlighted in https://github.com/w3c/csswg-drafts/issues/2496.

I've tried to summarize some of these issues in a post [here](https://johannesodland.github.io/2024/08/24/the-case-for-multiple-insets.html).

-- 
GitHub Notification of comment by johannesodland
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9868#issuecomment-2447704970 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 30 October 2024 16:21:54 UTC