<p>Is it possible to have multiple sticky elements stacked on top of each other in pure CSS?</p>

<p>The desired behavior can be seen here:
https://webthemez.com/demo/sticky-multi-header-scroll/index.html</p>

<p>Only I'd prefer to use pure CSS, instead of a Javascript implementation. I've experimented a bit with multiple sticky elements, but I can't keep them from pushing out other sticky elements. I've tried placing them in the same stacking context:</p>

<pre>#sticky .sticky-1,

sticky .sticky-2

{
position: sticky;
}

sticky .sticky-1

{
top: 1em;
z-index: 1;
}

sticky .sticky-2

{
top: 2em;
z-index: 1;
}
</pre>

<p>But can't get it to work, as you can see in below . Any insights would be greatly appreciated!</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-css lang-css prettyprint-override">#container
{
display: grid;
grid-template-columns: 50% 50%;
}

sticky .sticky-1,

sticky .sticky-2

{
position: sticky;
}

sticky .sticky-1

{
top: 1em;
z-index: 1;
}

sticky .sticky-2

{
top: 2em;
z-index: 1;
}

fixed

{
position: relative;
}

fixed .sticky-1

{
position: fixed;
top: 0;
}

fixed .sticky-2

{
position: fixed;
top: 1em;
}</pre>
<pre class="snippet-code-html lang-html prettyprint-override"><div id="container">
<article id="sticky">
<header>

</header>
<main><h1 class="sticky-1">Sticky heading</h1>
<p>here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. </p>

</main>
<section>

<h2 class="sticky-2">Both headings should stick at the same time.</h2>
<p> And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. And finally a little more copy. </p>

  </section>

</article>
<article id="fixed">
<header>

</header>
<main><h1 class="sticky-1">Fixed heading</h1>
<p>Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes here. oes here. Some copy goes here.