Štítek na kartě
Oskar právě přišel do útulku, a tak jsme jeho kartě přidali štítek „Nový“: prvek span nad obrázkem. Zatím zabírá samostatný řádek. Chceme ho mít v levém horním rohu karty, přes obrázek.
Vlastnost position má pro každou svou hodnotu třídu, která se jmenuje stejně: static, relative, absolute, fixed a sticky. Posuny top, right, bottom a left mají třídy s čísly ze škály mezer:
| Třída | CSS |
|---|---|
top-3 | top: 0.75rem; (12 px) |
left-3 | left: 0.75rem; (12 px) |
right-0 | right: 0; |
-top-2 | top: -0.5rem; (minus před třídou udělá hodnotu zápornou) |
inset-0 | top: 0; right: 0; bottom: 0; left: 0; |
absolute inset-0 roztáhne prvek přes celého jeho předka s pozicí. To se hodí třeba pro poloprůhlednou vrstvu přes obrázek.
A vzpomeňte si na trik z kurzu CSS: posuny absolutního prvku se měří od jeho nejbližšího předka s jinou pozicí než static. Proto bude karta potřebovat třídu relative.
Jak psát:
Pokyny
Přidejte štítku třídy absolute top-3 left-3. Skočí do levého horního rohu stránky, přes logo: žádný z jeho předků nemá pozici, a tak se jeho posuny měří od stránky.
Přidejte Oskarově kartě (prvku article) třídu relative. Štítek se přesune do rohu karty, 12 px od jejího horního a levého kraje: karta je teď jeho nejbližším předkem s pozicí.
Začněte programovat zdarma
9/11