Как поставить элемент в угол блока
Короткий ответ
Карточке — position: relative, значку — position: absolute и расстояния от нужных краёв:
<div style="position: relative; width: 220px; padding: 24px 16px 16px; background: whitesmoke; border-radius: 8px;">
<span style="position: absolute; top: 8px; right: 8px; padding: 2px 8px; background: crimson; color: white; border-radius: 10px; font-size: 12px;">New</span>
Wireless headphones
</div>Другие углы — это другие пары свойств: top и left, bottom и right, bottom и left.
Точно на углу
Чтобы центр значка оказался на самом углу, поставьте его в угол с нулевыми координатами и сдвиньте на половину собственного размера через translate:
<div style="position: relative; display: inline-block; margin: 16px;">
<button>Messages</button>
<span style="position: absolute; top: 0; right: 0; translate: 50% -50%; min-width: 20px; padding: 2px; background: crimson; color: white; border-radius: 10px; font-size: 12px; text-align: center;">3</span>
</div>Частая ошибка
Значок в углу может перекрыть текст карточки: абсолютный элемент не занимает места, и соседи о нём не знают. Оставьте под него запас через padding у карточки, как в первом примере.
Функции из этого ответа
- position — Как позиционируется элемент: в обычном потоке или по смещениям.
- top, right, bottom, left — Смещения позиционированного элемента от краёв области отсчёта: сверху, справа, снизу и слева.
- translate, rotate, scale — Отдельные свойства для сдвига, поворота и масштаба — вместо функций в `transform`.