Pin a badge to a corner – CSS Exercise with Solution

Attach a badge to the corner of a card.

What to build

Two rules.

Requirements

.card has position: relative.
.badge has position: absolute, with top and right of 8px.

Constraints

Do not use margins to place the badge.

Example

.tag { position: absolute; left: 0; }

Why it works

The nearest positioned ancestor is the card, so the offsets are measured from its corner.

Hints

Hint 1

The card is the reference point.

Hint 2

The badge leaves the normal flow.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Badge</title>
  <style>
    .card { position: relative; width: 200px; padding: 30px; background: lightcyan; }
    .badge { position: absolute; top: 8px; right: 8px; }
  </style>
</head>
<body>
  <div class="card">Inbox <span class="badge">3</span></div>
</body>
</html>

Lesson: Positioning and stacking →