Badges auf Karten

Oskar ist gerade im Tierheim angekommen, deshalb haben wir seiner Karte ein Badge „Neu“ gegeben: ein span über dem Bild. Vorerst nimmt es eine eigene Zeile ein. Wir hätten es gern in der oberen linken Ecke der Karte, über dem Bild.

Für die Eigenschaft position gibt es zu jedem Wert eine Klasse, die nach dem Wert benannt ist: static, relative, absolute, fixed und sticky. Die Verschiebungen top, right, bottom und left haben Klassen mit den Zahlen der Abstandsskala:

absolute inset-0 streckt ein Element über den ganzen Vorfahren, der eine Position hat. Das ist zum Beispiel praktisch für eine halbtransparente Ebene über einem Bild.

Und denke an den Trick aus dem CSS-Kurs: Die Verschiebungen eines absolut positionierten Elements werden von seinem nächsten Vorfahren gemessen, dessen Position nicht static ist. Deshalb braucht die Karte die Klasse relative.