How to place an element in a corner
Short answer
Give the card position: relative and the badge position: absolute plus distances from the chosen edges:
<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>Other corners are other pairs of properties: top and left, bottom and right, bottom and left.
Right on the corner
To put the badge's center on the corner itself, place it at zero offsets and shift it by half its own size with 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>Common mistake
A corner badge can cover the card's text: an absolute element takes up no space, and its neighbors do not know about it. Leave room for it with padding on the card, as in the first example.
Functions used in this recipe
- position — How an element is positioned: in the normal flow or by offsets.
- top, right, bottom, left — The offsets of a positioned element from the edges of its reference box: top, right, bottom and left.
- translate, rotate, scale — Separate properties for a shift, a rotation and scaling — instead of functions in `transform`.