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
topetleft. - Que change
top: 20pxsi l'on retire la déclarationposition?
Corrigé
- À sa place dans le flux, le deuxième bloc commencerait en .
bottom: 30pxl'éloigne de 30 pixels de son bord bas, donc le remonte ;right: 20pxle 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
staticles ignore.
100 % gratuit
La suite du chapitre est sur Adloun
- 10 autres exercices corrigés dans ce chapitre
- Les 2 QCM du chapitre, le premier sans compte
- Le tuteur, qui guide pas à pas sans donner la réponse
Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.