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

It is technically already possible to do this with just pure CSS, but not as cleanly as the above examples. The only requirement is that each nesting level must be inside their own container.

https://codepen.io/Sillvva/pen/LYdmOda

```html
<section>
  <h1>Header 1</h1>
  <section>
    <h2>Header 2</h2>
    <p></p>
    <p></p>
    <p></p>
    <section>
      <h3>Header 3</h2>
      <p></p>
      <p></p>
    </section>
  </section>
</section>
```

```css
h1 {
  font-size: 2rem;
  padding: 0.25rem 0.5rem;
  position: sticky;
  top: 0;
  z-index: 3;
}

h2 {
  font-size: 1.6rem;
  padding: 0.25rem 0.5rem;
  position: sticky;
  top: 2.5rem; // h1 = 2rem font size + 0.5rem padding
  z-index: 2;
}

h3 {
  font-size: 1.2rem;
  padding: 0.25rem 0.5rem;
  position: sticky;
  top: 4.6rem; // h1 = 2rem + 0.5rem, h2 = 1.6rem + 0.5rem
  z-index: 1;
}
```

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


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

Received on Saturday, 6 August 2022 00:49:02 UTC