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

VS Code recently launched a feature called [sticky scroll](https://code.visualstudio.com/updates/v1_70#_editor-sticky-scroll):

![sticky-scroll](https://user-images.githubusercontent.com/213073/183120339-4fc7a6fc-9b70-4996-92dc-303a0353bacd.gif)

It’s a great use case for an extension to `position: sticky`.

---

Linking back to [my suggestion in #7475](https://github.com/w3c/csswg-drafts/issues/7475#issuecomment-1182982687) which would turn `position` into kind of a shorthand, perhaps this type of syntax would also make sense here as well? Something like: `position: sticky / depth`.

By default the `depth` would be a number and default to 1. Elements with the same depth don’t stick against each other. Elements with “more” depth stick against elements that have a lower depth. Elements with a lower depth push elements with a higher depth value out of view.

Taking [my markup from above](https://github.com/w3c/csswg-drafts/issues/2496#issuecomment-1002312635) as an example, the CSS to achieve it would then look like this _(being overly verbose here, to indicate what is going on)_:

```css
article h1 {
  position: sticky / 1;
}

article h2 {
  position: sticky / 2;
}
```

---

Alternatively, this `depth` could also be a separate property naned `sticky-level` or `sticky-depth` or …

```css
article :is(h1, h2) {
  position: sticky;
  top: 0;
}

article h2 {
  sticky-level: 2;
}
```

The inset and margin properties would remain untouched, and work like they already do wrt sticky positioning.

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


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

Received on Friday, 5 August 2022 16:38:08 UTC