Positioning: Relative/Absolute Badge

easy

By FrontendAtlas Editorial · Updated Jan 30, 2026

This pattern is used in notifications, status indicators, and card metadata, so the badge should remain anchored even as content size changes. Edge cases include long titles and responsive cards; test overlap and ensure accessible contrast. Trade-off: absolute positioning is simple but can break if parent sizing changes.

Solution

Overview

Absolute positioning within a relatively positioned parent keeps the badge anchored to the card corner while removing it from normal flow.

Approach — Relative Parent + Absolute Child

Use top/right offsets and a small translate if you want the badge to overlap the corner. Ensure the badge is readable (contrast, padding) and doesn’t shift layout because it’s absolutely positioned.

<html>

<div class='product'>
  <img src='data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="320" height="180">
  <rect width="100%" height="100%" fill="%23ddd"/>
  <text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill="%23666" font-family="Arial" font-size="20">
    Product
  </text>
</svg>
' alt='Product'>
<span class='badge'>
  NEW
</span>
</div>

# CSS

.product {
  position: relative;
  display: inline-block;
}
.badge {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: #e63946;
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.5px;
}
img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
}

Notes & Pitfalls

Pitfalls

If `.product` isn’t positioned relatively, `.badge` will be placed relative to the entire page.
Avoid using large pixel offsets that break responsive behavior.

Techniques

Relative positioning on the parent establishes a local coordinate system.
Absolute positioning on the child allows fixed placement within that parent.

Resources

Guides

Frontend interview preparation guideGuide Frontend coding interview questions and prep guideBlueprint JavaScript Problems That Actually Show UpBlueprint Build Great UI in 60 MinutesBlueprint

Preparing for interviews? Use Frontend Coding Challenges first, then move into a concrete Study Plan before targeted Company Prep.

Open frontend interview questions Browse CSS interview questions Open Essential 60 Open Machine Coding Hub Open Frontend Coding Challenges Open System Design Open Interview Prep Guide Open System Design Blueprint Open Framework Prep Paths Open Study Plans Open 7-day crash study plan Open Company Prep