Ce blog discutera de la propriété de position CSS et de la méthode pour créer un élément collant en HTML.
Qu'est-ce que la propriété de position CSS ?
La propriété CSS position spécifie la méthode de positionnement des éléments HTML, qui peut être absolue, collante, statistique, fixe, héritée, relative ou initiale.
Syntaxe
position : collant | absolu | statique | fixé | relatif | tu hérites | initial
La syntaxe donnée ci-dessus montre que la propriété position a des valeurs différentes. Ils peuvent être attribués en conséquence.
Voyons maintenant la procédure pour créer des éléments collants en 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 et agit alors comme un élément collant.
Passons en revue l'exemple simple pour comprendre le concept de position collante CSS.
Exemple : Comment créer un élément collant en HTML ?
Dans le fichier HTML, ajoutez
pour le titre,
pour le paragraphe, et
ayant une liste ordonnée imbriquée
- avec une liste
- .
Noter : Nous avons pris une longue liste afin qu'en faisant défiler notre page, vous puissiez observer le comportement de l'élément collant.
HTML
< h2 > Notes autocollantes : voir l'effet de l'élément autocollant < / h2 >
< p > position : collante < / p >
< div classer = 'collant' > Ceci est ma liste de choses à faire ! < / div >
< p >
< ol >
< ce > Gestionnaire d'appels < / ce >
< ce > Rencontre avec les employés < / ce >
< ce > Soumettre le rapport < / ce >
< ce > Aller chez le docteur < / ce >
< ce > Réserver un vol < / ce >
< ce > Aller marcher. < / ce >
< ce > Allez faire l'épicerie. < / ce >
< ce > Regarder la télévision < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< ce > Du texte. < / ce >
< / ol >
< / p >Ensuite, nous allons donner 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 accolades, nous attribuerons le ' position « valeur de la propriété en tant que » collant ”.
- La ' Haut ' est défini comme ' 0 ”.
- La ' Couleur de l'arrière plan ' est ' #00154f ”.
- Donnez quelques ' rembourrage ' à la div en définissant sa valeur comme ' 40px ”.
- ' taille de police ' comme ' 30px ”.
- ' Couleur ' des polices est défini comme ' blanche ”.
CSS
.collant {
position : collant ;
Haut : 0 ;
Couleur de l'arrière plan : #00154f ;
rembourrage : 40px ;
taille de police : 30px ;
Couleur : blanche ;
}Enregistrez le fichier HTML et ouvrez-le dans le navigateur pour voir le résultat :
Astuce bonus
En utilisant le ' hsla() ', vous pouvez définir un arrière-plan transparent pour l'élément collant ajouté comme suit :
Contexte - Couleur : hsla ( 0 , 100 %, 90 %, 0,8 ) ;Production
C'est ainsi que l'élément colle à la position spécifique en définissant le CSS ' position « valeur de la propriété en tant que » collant ”.
Conclusion
La ' collant ” position en CSS, fait basculer la position de l'élément entre relative et fixe. En conséquence, l'élément collant ajouté est positionné par rapport au rouleau jusqu'à ce qu'il atteigne un certain point où 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é dans la création d'éléments transparents simples et collants.