Comment faire - Image collante
Apprenez à créer une image collante avec CSS.
Image collante
Remarque : cet exemple ne fonctionne pas dans Internet Explorer ou Edge 15 et les versions antérieures.
Image collante
Exemple
img.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 .
Pour en savoir plus sur la façon de styliser les images, lisez notre tutoriel sur les images CSS .