🧩 Exercice : Comprendre position: relative

🎯 Objectif

Déplacer légèrement un élément en utilisant position: relative tout en observant qu’il conserve sa place dans le flux normal.

📝 Consignes

• Créer trois blocs avec la classe box.
• Donner à chaque bloc une couleur différente.
• Appliquer position: relative uniquement au bloc du milieu.
• Déplacer ce bloc avec top et left (ex : top: 20px; left: 30px;).
• Observer que le bloc suivant ne remonte pas.

🧱 Structure HTML imposée

<div class="box box1">Bloc 1</div>
<div class="box box2">Bloc 2 (à déplacer)</div>
<div class="box box3">Bloc 3</div>
  

🎨 CSS attendu

L’élève doit produire un CSS qui :

• donne une taille et une couleur aux blocs,
• applique position: relative au bloc 2,
• le décale avec top et left,
• montre que l’espace d’origine reste réservé.

🧩 Exercice : Utiliser position: absolute avec un parent en relative

🎯 Objectif

Comprendre comment un élément en position: absolute se positionne par rapport à son parent en position: relative.

📝 Consignes

• Créer un bloc parent avec la classe parent.
• À l’intérieur, créer un bloc enfant avec la classe child.
• Donner une taille et une couleur au parent.
• Donner une taille et une couleur différente à l’enfant.
• Appliquer position: relative au parent.
• Appliquer position: absolute à l’enfant.
• Déplacer l’enfant avec top et right.

🧱 Structure HTML imposée

<div class="parent">
  <div class="child">Enfant</div>
</div>
  

🎨 CSS attendu

L’élève doit produire un CSS qui :

• donne une taille visible au parent,
• place l’enfant en absolute,
• le positionne dans un coin du parent,
• montre que l’enfant ne prend plus de place dans le flux.