Positioning
Place elements with relative, absolute, and inset utilities.
Syntax
class="relative" ... class="absolute top-0 right-0"Positioning utilities map to CSS position.
relative— positioned relative to itself; anchors absolute children.absolute— positioned relative to the nearest positioned ancestor.top-0 right-0— offset edges.fixed/sticky— pin to the viewport or scroll.
The badge below is absolutely positioned in the top-right corner of a relative box.
Example
Loading editor…
Press Run to see the result.
When to use it
- A developer overlays a 'New' badge on a product image by making the image container relative and positioning the badge absolute in the top-right corner.
- A sticky header stays at the top of the viewport as the user scrolls by applying sticky top-0 and a z-index utility.
- A modal backdrop covers the entire screen using fixed inset-0 and a semi-transparent background color.
More examples
Absolute badge overlay
relative on the wrapper establishes the positioning context; absolute top-2 right-2 places the badge precisely in the top-right corner.
<div class="relative w-48">
<img src="product.jpg" alt="Product" class="rounded">
<span class="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-0.5 rounded-full">
New
</span>
</div>Sticky navigation bar
sticky top-0 keeps the header pinned to the top of the viewport on scroll; z-50 ensures it layers above other page content.
<header class="sticky top-0 z-50 bg-white shadow">
<div class="container mx-auto flex items-center justify-between px-4 py-3">
<span class="font-bold text-lg">Brand</span>
<nav class="flex gap-4 text-sm">...</nav>
</div>
</header>Full-screen fixed overlay
fixed inset-0 stretches the overlay to fill the entire viewport; bg-black/50 creates a semi-transparent scrim behind the modal panel.
<div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
<div class="bg-white rounded-lg p-8 max-w-md w-full">
<h2 class="text-xl font-bold">Modal Title</h2>
<p class="mt-2 text-gray-600">Modal content goes here.</p>
</div>
</div>
Discussion