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

Coordonnées absolues

Positionnement et empilement · niveau 2

Énoncé

Un cadre en position: relative commence en $(100, 80)$ ; il mesure 300 sur 200 pixels en border-box, avec une bordure de 5 pixels et un rembourrage de 20. Un enfant de 60 sur 30 pixels y est placé en absolu. Calculer les coordonnées de son coin supérieur gauche pour :

top: 0; left: 0;
bottom: 10px; right: 10px;
top: 50%; left: 50%; (les pourcentages se rapportent au bloc conteneur).

Que deviennent ces résultats si l'on retire position: relative du cadre, la page n'ayant aucun autre élément positionné et n'ayant pas défilé ?

Corrigé

Le bloc conteneur est la boîte de rembourrage du cadre : la bordure (5 pixels) est exclue, le rembourrage ne compte pas. Elle commence en $(105, 85)$ et mesure $300 - 10 = 290$ sur $200 - 10 = 190$ .

$(105, 85)$ : le rembourrage n'écarte pas l'enfant absolu.
Bord droit à $105 + 290 - 10 = 385$ , bord bas à $85 + 190 - 10 = 265$ ; coin supérieur gauche en $(385 - 60, 265 - 30) = (325, 235)$ .
$50 %$ de 290 et de 190 : $(105 + 145, 85 + 95) = (250, 180)$ ; c'est le coin de l'enfant qui est au centre, pas l'enfant (il faudrait transform: translate(-50%, -50%) pour le centrer).

Sans position: relative, le bloc conteneur devient le bloc conteneur initial, de la taille de la fenêtre et commençant en $(0, 0)$ : le premier cas donne $(0, 0)$ , le deuxième le coin inférieur droit de la fenêtre moins 10 pixels, le troisième le centre de la fenêtre. Les trois résultats avec cadre, $(105, 85)$ , $(325, 235)$ et $(250, 180)$ , ont été vérifiés dans Chromium.

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 →