Comment créer un élément collant dans HTML

Pour améliorer l'apparence globale d'une page Web, les éléments ajoutés doivent être positionnés en conséquence. Plus précisément, le CSS "position»La propriété définit le positionnement d'un élément dans un document. L'emplacement est défini par les propriétés droite, gauche, supérieure et inférieure. Cependant, la position par défaut des éléments est statique, dans laquelle les éléments résident avec le flux normal de la page.

Ce blog discutera de la propriété de position CSS et de la méthode pour créer un élément collant dans HTML.

Qu'est-ce que la propriété de position CSS?

La propriété de position CSS spécifie la méthode de positionnement des éléments HTML, qui peut être un absolu, collant, statistique, fixe, hérité, relatif ou initial.

Syntaxe

Position: collante | Absolu | statique | fixe | relative | héritage | initiale

La syntaxe donnée ci-dessus montre que la propriété de position a des valeurs différentes. Ils peuvent être affectés en conséquence.

Maintenant, vérifions la procédure pour créer des éléments collants dans HTML.

Qu'est-ce que la position CSS: collante?

L'élément HTML avec un «collant«La position a une position relative jusqu'à ce qu'elle atteigne un point puis agit comme un élément collant.

Passons par l'exemple simple pour comprendre le concept de position collante CSS.

Exemple: comment créer un élément collant dans HTML?
Dans le fichier html, ajouter

pour la tête,

pour le paragraphe, et avoir le nom de classe «collant". Ensuite, ajoutez un

Tag ayant une liste ordonnée imbriquée

avec une liste
1. .

   Note: Nous avons pris une longue liste afin qu'en faisant défiler notre page, vous pouvez observer le comportement de l'élément collant.

   Html

   Notes collantes: voir l'effet de l'élément collant

   
   

   Position: collant

   
   Ceci est ma liste de tâches!
   

   
   

   
   
   1. Responsable des appels
   
   
   2. Rencontrer des employés
   
   
   3. Soumettre le rapport
   
   
   4. Aller chez le docteur
   
   
   5. Réserver un vol
   
   
   6. Aller marcher.
   
   
   7. Faire l'épicerie.
   
   
   8. Regarder la télévision
   
   
   9. Du texte.
   
   
   10. Du texte.
   
   
   11. Du texte.
   
   
   12. Du texte.
   
   
   13. Du texte.
   
   
   14. Du texte.
   
   
   15. Du texte.
   
   
   16. Du texte.
   
   
   17. Du texte.
   
   
   18. Du texte.
   
   
   19. Du texte.
   
   
   20. Du texte.
   
   
   21. Du texte.
   
   
   22. Du texte.
   
   
   23. Du texte.
   
   
   24. Du texte.
   
   
   25. Du texte.
   
   
   26. Du texte.
   
   
   27. Du texte.
   
   
   28. Du texte.
   
   
   29. Du texte.
   
   
   30. Du texte.
   
   
   
   

   Ensuite, nous fournirons du style à la div nommée Sticky:

   • Ici, ".collant»Représente la classe dans laquelle les propriétés de style doivent être appliquées.
   • À l'intérieur des supports bouclés, nous attribuerons le «position«Valeur de la propriété comme«collant".
   • Le "haut"Est défini comme"0".
   • Le "Couleur de l'arrière plan" est "# 00154F".
   • En donner "rembourrage"Au div en définissant sa valeur comme"40px".
   • "taille de police" comme "30px".
   • "couleur«Des polices sont définies comme«blanc".

   CSS

   .collant
   Position: collante;
   en haut: 0;
   Color d'arrière-plan: # 00154F;
   rembourrage: 40px;
   taille de police: 30px;
   Couleur blanche;
   

   Enregistrez le fichier HTML et ouvrez-le dans le navigateur pour voir la sortie:

   Conseil bonus

   En utilisant le «hsla ()”Méthode, vous pouvez définir un arrière-plan transparent pour l'élément collant ajouté comme suit:

   Color en arrière-plan: HSLA (0, 100%, 90%, 0.8);

   Sortir

   C'est ainsi que l'élément colle à la position spécifique en définissant le CSS "position«Valeur de la propriété comme«collant".

   Conclusion

   Le "collant”Position dans CSS, fait basculer la position de l'élément entre relatif et fixe. En conséquence, l'élément collant ajouté est positionné par rapport au parchemin jusqu'à ce qu'il atteigne un certain point lorsqu'il se comporte comme un collant. Vous pouvez également ajuster le niveau de transparence de l'élément collant ajouté en utilisant la méthode HSLA (). Ce blog vous a guidé sur la fabrication d'éléments transparents simples et collants.