Adloun

CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 6 · Application directe du cours

Décalages relatifs

Positionnement et empilement · niveau 1 (application)

Énoncé

Trois blocs de 50 pixels de haut se suivent, séparés par des marges basses de 10 pixels ; le premier commence en . On donne au deuxième :


.deuxieme {
  position: relative;
  bottom: 30px;
  right: 20px;
}
  • Où est dessiné le deuxième bloc ? Où commence le troisième ?
  • Réécrire la règle avec top et left.
  • Que change top: 20px si l'on retire la déclaration position ?

Corrigé

  • À sa place dans le flux, le deuxième bloc commencerait en . bottom: 30px l'éloigne de 30 pixels de son bord bas, donc le remonte ; right: 20px le pousse vers la gauche. Il est dessiné en , et dépasse donc de 4 pixels à gauche de la fenêtre. Le troisième bloc commence à , comme si de rien n'était.
  • top: -30px; left: -20px;
  • Rien : les décalages ne s'appliquent qu'aux boîtes positionnées ; une boîte static les ignore.

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →