Défi : Positionnement Sticky
Tâche
Créez une mise en page de blog pour des articles sur les animaux, en veillant à ce que la photo de l'animal correspondant soit toujours visible pendant que l'utilisateur lit l'article. Lorsque l'utilisateur commence à lire sur un autre animal, proposez la photo de l'animal suivant. Étapes :
- Appliquez le positionnement
sticky
à l'élément avec le nom de classeillustration
. - Spécifiez la position sur la page où l'élément doit devenir collant.
index.html
index.css
- Pour que les illustrations d'animaux restent en haut de la fenêtre pendant que l'utilisateur lit l'article, appliquez le positionnement
sticky
à l'élément avec le nom de classeillustration
. - Définissez la propriété
top
à0
pour spécifier que l'élément doit rester en haut de la fenêtre.
index.html
index.css
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
Awesome!
Completion rate improved to 2.04
Défi : Positionnement Sticky
Glissez pour afficher le menu
Tâche
Créez une mise en page de blog pour des articles sur les animaux, en veillant à ce que la photo de l'animal correspondant soit toujours visible pendant que l'utilisateur lit l'article. Lorsque l'utilisateur commence à lire sur un autre animal, proposez la photo de l'animal suivant. Étapes :
- Appliquez le positionnement
sticky
à l'élément avec le nom de classeillustration
. - Spécifiez la position sur la page où l'élément doit devenir collant.
index.html
index.css
- Pour que les illustrations d'animaux restent en haut de la fenêtre pendant que l'utilisateur lit l'article, appliquez le positionnement
sticky
à l'élément avec le nom de classeillustration
. - Définissez la propriété
top
à0
pour spécifier que l'élément doit rester en haut de la fenêtre.
index.html
index.css
Merci pour vos commentaires !