Positionnement Sticky pour des Mises en Page Dynamiques
Le positionnement sticky combine des aspects du positionnement relatif et du positionnement fixe. Lorsqu’un élément est positionné en sticky, il se comporte comme un élément positionné relativement jusqu’à ce qu’il atteigne un certain seuil sur la page. À ce moment-là, il adopte un comportement similaire à celui d’un élément positionné de façon fixe.
position: sticky;
Considérons l’illustration suivante. L’élément avec le contenu texte I am sticky utilise le positionnement sticky.
Lorsqu’un élément se trouve à l’intérieur d’un conteneur, et que ce conteneur reste dans la fenêtre d’affichage, l’élément se comporte comme s’il était positionné relativement. Cependant, lorsqu’une partie du conteneur parent sort de la fenêtre d’affichage, l’élément devient fixe tant qu’une partie du conteneur reste visible à l’écran. Une fois que le conteneur entier quitte la fenêtre d’affichage, le positionnement relatif est réactivé et l’élément disparaît de l’écran en même temps que le conteneur.
Passons à la pratique et créons quelques sections avec des titres sticky. Ainsi, l’utilisateur pourra toujours voir le titre de la section qu’il est en train de lire, puis celui-ci disparaîtra lors du défilement.
index.html
index.css
Remarque
Il est important de préciser la propriété
topoubottom, afin que le navigateur comprenne où l’on souhaite que l’élément reste collé.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you show me an example of how to use sticky positioning with section titles?
What does the CSS look like for making section titles sticky?
Can you explain more about the importance of the `top` or `bottom` property with sticky positioning?
Awesome!
Completion rate improved to 2.04Positionnement Sticky pour des Mises en Page Dynamiques
Glissez pour afficher le menu
Le positionnement sticky combine des aspects du positionnement relatif et du positionnement fixe. Lorsqu’un élément est positionné en sticky, il se comporte comme un élément positionné relativement jusqu’à ce qu’il atteigne un certain seuil sur la page. À ce moment-là, il adopte un comportement similaire à celui d’un élément positionné de façon fixe.
position: sticky;
Considérons l’illustration suivante. L’élément avec le contenu texte I am sticky utilise le positionnement sticky.
Lorsqu’un élément se trouve à l’intérieur d’un conteneur, et que ce conteneur reste dans la fenêtre d’affichage, l’élément se comporte comme s’il était positionné relativement. Cependant, lorsqu’une partie du conteneur parent sort de la fenêtre d’affichage, l’élément devient fixe tant qu’une partie du conteneur reste visible à l’écran. Une fois que le conteneur entier quitte la fenêtre d’affichage, le positionnement relatif est réactivé et l’élément disparaît de l’écran en même temps que le conteneur.
Passons à la pratique et créons quelques sections avec des titres sticky. Ainsi, l’utilisateur pourra toujours voir le titre de la section qu’il est en train de lire, puis celui-ci disparaîtra lors du défilement.
index.html
index.css
Remarque
Il est important de préciser la propriété
topoubottom, afin que le navigateur comprenne où l’on souhaite que l’élément reste collé.
Merci pour vos commentaires !
