Maison > interface Web > tutoriel CSS > le corps du texte

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

DDD
Libérer: 2024-10-31 18:57:02
original
463 Les gens l'ont consulté

Can Multiple Sticky Elements Be Stacked in Pure CSS?

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>
Copier après la connexion

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

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!