Comment empiler plusieurs éléments collants les uns sur les autres en Pure CSS ?

Comprendre le problème :

Plusieurs éléments collants empilés les uns sur les autres en CSS pur peuvent être difficiles à mettre en œuvre, car ils ont tendance à repousser les autres éléments collants. L'exemple fourni dans la question démontre ce comportement, où deux titres collants (« Titre collant » et « Les deux titres doivent coller en même temps. ») ne restent pas empilés lorsqu'ils défilent.

Le Solution :

Pour obtenir le comportement souhaité, vous devez faire en sorte que tous les éléments collants collent au même conteneur (bloc contenant) en ajoutant des décalages. Voici un aperçu de la solution :

• Déterminez le conteneur :

  • Identifiez l'élément parent auquel tous les éléments collants doivent adhérer (par exemple, l'élément
    ).

• Appliquer le positionnement collant :

  • Ajouter la position : collant propriété à tous les éléments collants.

• Définir les distances de décalage :

  • Utilisez la propriété supérieure pour spécifier la distance de décalage à partir du bord supérieur du conteneur.

• Ajustez la distance de décalage :

  • Chaque élément collant suivant doit avoir sa propriété supérieure valeur incrémentée de la hauteur du ou des éléments collants précédents pour garantir qu'ils s'empilent correctement.

Exemple de code :

Voici une version modifiée de votre code fourni avec des décalages ajoutés aux éléments collants. Les éléments collants s'empileront désormais les uns sur les autres lors du défilement :

<code class="html"><div id="container">
  <article id="sticky">
    <header>Both headings should stick at the same time.</header>
    <main>
      <h1 class="sticky-1">Sticky heading</h1>
      <p>Some copy goes here...</p>
    </main>
  </article>

  <article id="fixed">
    <header>Fixed heading</header>
    <main>
      <h1 class="sticky-1">Sticky heading</h1>
      <p>Some copy goes here...</p>
    </main>
  </article>
</div></code>

<code class="css">#sticky .sticky-1,
#sticky .sticky-2 {
  position: sticky;
}
#sticky .sticky-1 {
  top: 1em;
}
#sticky .sticky-2 {
  top: calc(1em + 50px);
}
#fixed .sticky-1 {
  position: fixed;
  top: 0;
}
#fixed .sticky-2 {
  position: fixed;
  top: 1em;
}</code>

En incorporant le concept de décalages, les éléments collants de cet exemple resteront désormais empilés correctement pendant le défilement.

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!