Абсолютное внутри относительного

Вернёмся к странице о кошке со всем, что вы на ней уже сделали, и применим абсолютное позиционирование так, как его используют чаще всего.

Размещать элемент относительно всей страницы нужно редко. Гораздо чаще его нужно поставить в угол другого элемента: значок на карточке, кнопку закрытия в углу окна или подпись на фотографии.

Хитрость в том, чтобы задать родителю position: relative. Без смещений родитель вообще не двигается, но становится ближайшим предком с позиционированием. Смещения его дочерних элементов с position: absolute тогда отсчитываются от его краёв:

.card {
	position: relative;
}

.close {
	position: absolute;
	top: 10px;
	right: 10px;
}

Где бы на странице ни находилась карточка, элемент с классом close окажется в 10 пикселях от верхнего края карточки и в 10 пикселях от её правого края. (Смещения отсчитываются от внутреннего края рамки карточки.)

К карточке персидской кошки мы добавили значок: span с классом badge. Давайте поставим его в правый верхний угол карточки.