Plusieurs éléments collants peuvent-ils être empilés en CSS pur ?

Est-il possible d'avoir plusieurs éléments collants empilés les uns sur les autres en CSS pur ?

Le comportement souhaité peut être vu ici :
https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Seulement, je préférerais utiliser du CSS pur, au lieu d'une implémentation Javascript. J'ai expérimenté un peu plusieurs éléments collants, mais je ne peux pas les empêcher de repousser d'autres éléments collants. J'ai essayé de les placer dans le même contexte d'empilement :

<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>

Mais je n'arrive pas à le faire fonctionner, comme vous pouvez le voir ci-dessous. Toute idée serait grandement appréciée !

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!