MP Web Studio
CSS100 of 100 available
50 / 100

LESSON 50 OF 100

Position a badge inside a card

Anchor a badge in the card’s top-right corner.

Official sourceW3C CSS Positioned Layout — absolute positioningReviewed: 2026-08-26
STEP 1 · LEARN

How it works

The relatively positioned card establishes the reference block. The absolute badge leaves normal flow, while top and right set its distance from the card edges.

Correct example
.card { position: relative; } .badge { position: absolute; top: 12px; right: 12px; }

The badge is positioned relative to the card, not the whole page.

Common mistake
.card { position: static; } .badge { position: absolute; top: 12px; right: 12px; }

Without a positioned ancestor, the badge can use another reference block and visually leave the card.

STEP 2 · APPLY

Your exercise

Complete the card and badge positioning, then set top and right to 12px.

STEP 3 · BUILD

Write and see the result

index.htmlCSS
Safe resultisolated
The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked
STEP 4 · CHECK

What needs to pass

0%not checked
  • The card is a relative reference.
  • The badge uses absolute positioning.
  • The badge is 12px from the top.
  • The badge is 12px from the right.
  • The badge is a child of the card.
Explain the solution logic

The relative-parent to absolute-child relationship keeps coordinates inside the component.