Can Multiple Sticky Elements Be Stacked in Pure CSS?

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

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

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:

<code class="css">#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}</code>

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

<code class="html"><div id="container">
  <article id="sticky">
    <header>

    </header>
    <main><h1 class="sticky-1">Sticky heading</h1></code>

The above is the detailed content of Can Multiple Sticky Elements Be Stacked in Pure CSS?. For more information, please follow other related articles on the PHP Chinese website!