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

Recently stumbled upon the limitation where I wanted multiple items to be sticky inside the same parent container, but without overlapping each other. 

Given this markup:

```html
<main>
<article>
  <h1 />
  <h2 />
  <h2 />
</article>
<article>
  <h1 />
  <h2 />
  <h2 />
</article>
</main>
```

I want the `<h1>` elements to be sticky against the top edge of `<article>`, and want the subheadings `<h2>` to stick against the preceding `<h1>` that's already stuck.

Right now I fixed it by fixating the `top` for `<h2>` to equal the height of `<h1>`, but that only works if all `<h1>` elements have the same height.

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

article h2 {
  top: var(--height-of-h1); /* But what if the <h1> text wraps?! Uhoh! */
}
```

**👉 What I'm looking for is an easier way to say “Hey `<h2>`, stick against the already sticky `<h1>`”**

Note that it's not a simple as saying “stick against the previously stuck element“, as you'd then end up with the 2nd `<h2>` sticking against the first `<h2>`, sticking against the `<h1>`.

---

💡 Could potentially be solved by leveraging some other specs and by expanding the functionality of `selector()` to mimic `document.querySelector` (see https://github.com/w3c/csswg-drafts/issues/5884#issuecomment-867117769)

```css
h2 {
  top: selector("h1:has(+ &)"); /* Selects the h1 that precedes self (&) */
}
```





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


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

Received on Tuesday, 28 December 2021 22:56:00 UTC