Comment - Élément collant
Apprenez à créer un élément collant avec CSS.
Remarque : cet exemple ne fonctionne pas dans Internet Explorer ou Edge 15 et les versions antérieures.
Élément collant
Exemple
div.sticky {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 0;
}
Un élément avec position: sticky;
est positionné en fonction de la position de défilement de l'utilisateur.
Un élément collant bascule entre relative
et fixed
, en fonction de la position de défilement. Il est positionné de manière relative jusqu'à ce qu'une position de décalage donnée soit rencontrée dans la fenêtre - puis il "colle" en place (comme position:fixed).
Remarque : Internet Explorer, Edge 15 et les versions antérieures ne prennent pas en charge le positionnement permanent. Safari nécessite un préfixe -webkit- (voir exemple ci-dessous). Vous devez également spécifier au moins l'un des éléments top
, right
, bottom
ou left
pour que le positionnement permanent fonctionne.
Pour en savoir plus sur le positionnement CSS, lisez notre tutoriel Positionnement CSS .