Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Appliquer le Positionnement Relatif | Maîtrise du Positionnement CSS
Techniques CSS Avancées

bookDéfi : Appliquer le Positionnement Relatif

Remarque

Chaque défi de ce cours comprend un exemple de code composé des fichiers index.html et index.css. Comme le cours se concentre sur l'apprentissage du CSS, il est recommandé de traiter les défis dans le fichier index.css. Une fois le défi terminé, cliquez sur le bouton « Exécuter le code » pour afficher la page en direct et vérifier que le défi a été résolu correctement.

De plus, chaque défi propose des boutons « Indice » et « Solution ». Cliquer sur le bouton « Indice » affichera des indices pertinents pour la tâche en cours, tandis que le bouton « Solution » révélera l'exemple de code avec la bonne application du CSS.

Tâche

  1. Ajouter la position relative au deuxième élément portant la classe item.
  2. Déplacer l'élément de 30px vers le bas et de 50px vers la gauche.
index.html

index.html

index.css

index.css

copy
  1. Déplacement vers le bas en définissant une valeur positive pour la propriété top.
  2. Déplacement vers la gauche en définissant une valeur négative pour la propriété left.
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 3

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 : Appliquer le Positionnement Relatif

Glissez pour afficher le menu

Remarque

Chaque défi de ce cours comprend un exemple de code composé des fichiers index.html et index.css. Comme le cours se concentre sur l'apprentissage du CSS, il est recommandé de traiter les défis dans le fichier index.css. Une fois le défi terminé, cliquez sur le bouton « Exécuter le code » pour afficher la page en direct et vérifier que le défi a été résolu correctement.

De plus, chaque défi propose des boutons « Indice » et « Solution ». Cliquer sur le bouton « Indice » affichera des indices pertinents pour la tâche en cours, tandis que le bouton « Solution » révélera l'exemple de code avec la bonne application du CSS.

Tâche

  1. Ajouter la position relative au deuxième élément portant la classe item.
  2. Déplacer l'élément de 30px vers le bas et de 50px vers la gauche.
index.html

index.html

index.css

index.css

copy
  1. Déplacement vers le bas en définissant une valeur positive pour la propriété top.
  2. Déplacement vers la gauche en définissant une valeur négative pour la propriété left.
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 3
some-alt