Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Positionnement Sticky | Positionnement des Éléments
Techniques CSS Avancées

bookDé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 :

  1. Appliquez le positionnement sticky à l'élément avec le nom de classe illustration.
  2. Spécifiez la position sur la page où l'élément doit devenir collant.
index.html

index.html

index.css

index.css

copy
  1. 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 classe illustration.
  2. 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.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 9

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookDé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 :

  1. Appliquez le positionnement sticky à l'élément avec le nom de classe illustration.
  2. Spécifiez la position sur la page où l'élément doit devenir collant.
index.html

index.html

index.css

index.css

copy
  1. 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 classe illustration.
  2. 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.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 2. Chapitre 9
some-alt