Re: [csswg-drafts] [css3 positioning] support position:sticky inside an overflow:hidden|auto on general parents (#865)

While I did not found a working solution to keep both overflow and sticky feature, I explored the possibility to disable overflow only when working with sticky elements.

The following piece of code resets the overflow property of elements that has a child marked with the sticky class.

```
*:has(:is(.sticky-top, .sticky-bottom)) {
    overflow: visible !important;
  }
```

I'm used to working with the bootstrap framework, so I based my css selector on the .sticky-top and .sticky-bottom classes, but feel free to change it to your needs.

Also, [I read](https://stackoverflow.com/a/63780286/4456593) that the sticky feature would only cause troubles with parents that have overflow with no fixed width or height set. So I explored further the possibility to disable only these elements.
The closest I could get was using the following piece of code :

```
  :is([style*="width: auto"], [style*="height: auto"]):has(:is(.sticky-top, .sticky-bottom)) {
    overflow: visible !important;
  }
  ```
  
  This requires the width and height attributes to be set on the elements and not via classes, which is quiet common... so I admit that this attempt may be worthless but might give you some ideas.
  
Let me know if I'm heading wrong way ;)

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


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

Received on Thursday, 1 August 2024 14:39:52 UTC