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

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

DDD

Libérer： 2024-11-01 02:00:02

original

908 Les gens l'ont consulté

Can we Stack Multiple Sticky Elements on Top of Each Other in 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;
}

Copier après la connexion

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>

Copier après la connexion

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!