Re: [csswg-drafts] [css-position] ‘Sticky’ behavior is too limited as position scheme created from the elements nearest block level ancestor & margins (#2496)

> It is technically already possible to do this with just pure CSS, but not as cleanly as the above examples. The only requirement is that each nesting level must be inside their own container. 

Unfortunately it is often impossible to achieve, and the biggest limitation of status quo is when multiple sticky elements are not nested and in some cases you cannot really control the DOM structure - an example would be a `<mat-table>` with a sticky header row expected to get stacked under `<search>`.  

```css
<search sticky></search>
<mat-table>
  <mat-header-row sticky />
  <mat-row />
</mat-table>
```

Since we cannot use Anchor API for that (after all, a floating element cannot be commonly considered an anchor), maybe we should aim for a virtual container, such as `::view-transition` at the top of `<html>`? Let's call it `::sticky-viewport` for now.

```
html
  ::sticky-viewport
  head
  body
```

An element that would get its `scroll-state(stuck: xxx)` and would have `position: sticky-viewport`, would become a child of the `::sticky-viewport` - it would have `display: block` and `position: fixed` and would ignore user values.

```css
search {
  /* this would make this element adoptable by the viewport as child
  position: sticky-viewport;
  /* today's position: sticky would remain unchanged */
}

mat-table-header.sticky {
  position: sticky-viewport;
  sticky-box: border-box | content-box; /* used to determine scroll-state */
}
```

With this code whenever `<mat-table-header>` would become stuck, it would stack under `<search>`.

I bet my idea has some weak points (such as circular refs etc), but I still want to leave it here, maybe could serve something good.


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


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

Received on Wednesday, 14 May 2025 17:35:19 UTC