Badges on Cards
Oscar has just arrived at the shelter, so we've given his card a "New" badge: a span above the picture. For now, it takes up a line of its own. We'd like it in the top left corner of the card, over the picture.
The property position has a class for each of its values, named after the value: static, relative, absolute, fixed and sticky. The offsets top, right, bottom and left have classes with the numbers of the spacing scale:
| Class | CSS |
|---|---|
top-3 | top: 0.75rem; (12 px) |
left-3 | left: 0.75rem; (12 px) |
right-0 | right: 0; |
-top-2 | top: -0.5rem; (a minus before the class makes the value negative) |
inset-0 | top: 0; right: 0; bottom: 0; left: 0; |
absolute inset-0 stretches an element over the whole of its positioned ancestor. That's handy, for example, for a semi-transparent layer over a picture.
And remember the trick from the CSS course: the offsets of an absolute element are measured from its nearest ancestor with a position other than static. That's why the card will need the class relative.
Instructions
Add the classes absolute top-3 left-3 to the badge. It jumps to the top left corner of the page, over the logo: none of its ancestors has a position, so its offsets are measured from the page.
Add the class relative to Oscar's card (the article element). The badge moves to the corner of the card, 12 px from its top and left edges: the card is now its nearest ancestor with a position.
Start programming for free
9/11