Pouvons-nous empiler plusieurs éléments collants les uns sur les autres en Pure CSS ?

Implémentation de plusieurs éléments collants empilés à position absolue en CSS pur

Question :

Est-ce possible en CSS pur Comment empiler plusieurs éléments collants les uns sur les autres ?

Exemple :

https://webthemez.com/demo/sticky-multi-header-scroll/index.html

Je préfère Utiliser CSS pur, pas d’implémentation JavaScript. J'ai essayé plusieurs éléments collants mais je ne peux pas les empêcher d'éliminer d'autres éléments collants. J'ai essayé de les mettre dans le même contexte d'empilement :

#sticky .sticky-1,
#sticky .sticky-2
{
  position: sticky;
}
#sticky .sticky-1
{
  top: 1em;
  z-index: 1;
}
#sticky .sticky-2
{
  top: 2em;
  z-index: 1;
}

mais cela n'a pas fonctionné comme vous pouvez le voir dans l'extrait .html 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 >
      <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. </p>
    </main>
    <section>
      <h2 class="sticky-2">Both headings should stick at the same time.</h2 ></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!