[csswg-drafts] [css-position] Meta-issue: Unresolved `sticky` positioning use cases (#11145)

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

== [css-position] Meta-issue: Unresolved `sticky` positioning use cases ==
There are still many use cases for sticky-positioned elements that remain unsolved by the current spec(s).

This meta issue aims to track these use cases and the related proposals that could address them. Many of these issues were previously described in https://github.com/w3c/csswg-drafts/issues/2496, but I think it's worth tracking the individual issues. My hope is to renew focus on improving sticky positioning to better meet these needs.

- **Selecting a different containing block**
  The containing block for a sticky positioned element restricts how far the sticky element can be shifted. The current containing block for sticky elements limits what layout the sticky element can participate in. Being able to select a different containing block would add more flexibility to what layouts the sticky element can participate in.
  - https://github.com/w3c/csswg-drafts/issues/9868
  - https://github.com/w3c/csswg-drafts/issues/10223
   
- **Configuring insets from the containing block**
  The insets from the the containing block can currently be configured with the margin of the sticky element. This margin serves a dual purpose, as it is also used in regular layout. Due to this ambiguity, the working group [has resolved to ignore the margin](https://github.com/w3c/csswg-drafts/issues/9052#issuecomment-1642600755) in sticky pos calculation. We need a new way to configure the insets from the containing block.
  - https://github.com/w3c/csswg-drafts/issues/10754

- **Stack sticky elements against each other**
  It would be useful to be able to stack multiple sticky elements together without overlapping, such as allowing a sticky `h3` to sticky to the bottom of an already sticky `h2`.
  - https://github.com/w3c/csswg-drafts/issues/2496#issuecomment-1002312635
  - https://github.com/w3c/csswg-drafts/issues/8905#issuecomment-1651280663

- **Allow the sticky element to see the viewport edges**
  It could be useful to let an element be sticky both towards its scrollport edges, and towards the viewport edges. This would be useful in a table that is horizontally scrollable, where headers should remain in view when scrolling vertically.
  - https://github.com/w3c/csswg-drafts/issues/8286
  - https://github.com/w3c/csswg-drafts/issues/9140

- **Select which viewport the element is sticky against**
  There are multiple viewports that could be used as boundaries for the sticky element on mobile devices. It would be useful to control whether the element is sticky against the large viewport, the small viewport, or against the virtual keyboard.
  - https://github.com/w3c/csswg-drafts/issues/8934
  - https://github.com/w3c/csswg-drafts/issues/7475

- **Behavior during overscroll** 
  - https://github.com/w3c/csswg-drafts/issues/8309

- **Styling based on state (`:stuck`)**
  Sometimes design calls for adding a shadow or a background to a sticky menu based on its state. To do this we need a `:stuck` pseudo selector to add styles based on the state of the sticky element.
  - https://github.com/w3c/csswg-drafts/issues/5979
  


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


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

Received on Saturday, 2 November 2024 11:49:20 UTC