Значки на карточках

Оскар только что поступил в приют, поэтому мы повесили на его карточку значок «Новый»: элемент span над картинкой. Пока он занимает отдельную строку. А нам хочется, чтобы он был в левом верхнем углу карточки, поверх картинки.

У свойства position для каждого значения есть класс, названный по значению: static, relative, absolute, fixed и sticky. У смещений top, right, bottom и left классы с числами шкалы отступов:

absolute inset-0 растягивает элемент на весь его предок с заданным позиционированием. Это удобно, например, для полупрозрачного слоя поверх картинки.

И вспомните приём из курса CSS: смещения абсолютно позиционированного элемента отсчитываются от ближайшего предка, у которого позиционирование отлично от static. Поэтому карточке понадобится класс relative.