Layout
Position
Positioning utilities control how an element is placed: in the normal flow, layered over other content, pinned to the viewport, or stuck while scrolling.
The position utilities
| Class | Behaviour |
|---|---|
| static | Default — normal document flow |
| relative | Positioned relative to itself; anchor for absolute children |
| absolute | Removed from flow; positioned to nearest positioned ancestor |
| fixed | Pinned to the viewport |
| sticky | Scrolls until a threshold, then sticks |
Placing an absolute badge
Make the parent relative, the badge absolute, then use top-*/right-* to place it. Negative offsets like -top-2 pull it outside the box corner.
Example
<div class="relative inline-block">
<div class="w-16 h-16 rounded-full bg-slate-300"></div>
<span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs font-bold w-6 h-6 flex items-center justify-center rounded-full">3</span>
</div>ℹ️
Use z-10, z-20 … to control stacking order when positioned elements overlap.