[csswg-drafts] [css-position] `position:sticky` being limited to children with `inline` parents is confusing. New property to allow `block` parents. (#10223)

trusktr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-position] `position:sticky` being limited to children with `inline` parents is confusing. New property to allow `block` parents. ==
It is very unobvious why this demo does not work, the box does not stick:

https://stackblitz.com/edit/position-sticky-example-hygij3?file=index.html

Looking at search results, it is clear that people intuitively expect a `sticky` item to stick to the closest scrollable ancestor, not the closest `block` ancestor.

If you have an *existing* layout with some scrollable ancestor, and some descendant that you want to make sticky, it may be very undesirable and problematic to have to make the whole chain of the descendant's ancestor not be `display: block` if they already are, because that could completely break the layout.

Instead, we need a way to specify that the `sticky` element should "break out" into the stick position (similar to position:absolute in some sense) so that the element *always* sticks relative to the nearest scrollable, regardless if any ancestors are block or not.

### Solution:

This could be solved with either a new value for `position`, for example something like

```css
.some-descendant {
  position: force-sticky; /* name bike sheddable */
}
```

or a new property that employs the specific "stick to nearest scrollable no matter what" behavior, for example something like

```css
.some-descendant {
  stick: scroll;
}
```

or similar.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10223 using your GitHub account


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

Received on Wednesday, 17 April 2024 01:08:10 UTC