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

Here's an other example of where sticky is useful with other positioning schemes (issue 3). 

It's useful to use sticky positioning with abspos when you need to position elements in the background without taking up any place in flow. This is used in articles like these: https://www.nrk.no/hvis-insektene-forsvinner-1.15029017.

This would easily be solved with the proposed `sticky` property:

```css
position: absolute;
top: 0px;
height: 100vh;
sticky: top 0px 0px;
```

These positioning schemes will be even more useful once we get [scroll animations](https://drafts.csswg.org/scroll-animations-1).

It's currently not possible to use abspos with sticky, but it's possible to emulate it using a combination of column flexbox, `order: 0` and negative top margins. 

I've tried to generalise the approach in [this codepen](https://codepen.io/johannesodland/pen/YzaOPdP). (It's quite ugly at the moment, I'll try to clean it up later. )

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


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

Received on Friday, 19 August 2022 10:34:50 UTC