.card { position: relative; } .badge { position: absolute; top: 12px; right: 12px; }Eticheta se raportează la card, nu la întreaga pagină.
LECȚIA 50 DIN 100
Poziționează o etichetă în card
Ancorează o etichetă în colțul din dreapta sus al cardului.
PASUL 1 · ÎNVAȚĂ
Cum funcționează
Cardul relativ stabilește blocul de referință. Eticheta absolută este scoasă din fluxul normal, iar top și right îi stabilesc distanța față de muchiile cardului.
.card { position: static; } .badge { position: absolute; top: 12px; right: 12px; }Fără un strămoș poziționat, eticheta poate folosi un alt bloc de referință și părăsește vizual cardul.
PASUL 2 · APLICĂ
Exercițiul tău
Completează poziționarea cardului și a etichetei, apoi setează top și right la 12px.
index.htmlCSS
Rezultat sigurizolat
Ciorna se păstrează doar în acest browser.HTML și CSS permise · scripturile și rețeaua sunt blocate
PASUL 4 · VERIFICĂ
Ce trebuie să treacă
0%neverificat
- ○Cardul este reper relativ.
- ○Eticheta folosește poziționare absolută.
- ○Eticheta este la 12px de sus.
- ○Eticheta este la 12px din dreapta.
- ○Eticheta este copilul cardului.
Explică-mi logica rezolvării
Relația părinte relativ → copil absolut păstrează coordonatele în interiorul componentei.