Positioning, z-index, and overflow
Positioning utilities map to CSS positioning: relative, absolute, fixed, and sticky. A common pattern is a relative card with an absolute badge. An absolutely positioned element is placed relative to its nearest positioned ancestor, so the ancestor often needs relative.
z-* controls stacking order within the relevant stacking context. It does not guarantee that an element appears above everything on the page: transforms, opacity, isolation, and positioned ancestors can create stacking contexts. Use a small, documented layer scale for menus, dialogs, sticky headers, and tooltips.
Overflow utilities (overflow-hidden, overflow-auto, overflow-x-auto) decide how content outside a box behaves. Hiding overflow can clip focus rings and popovers, so apply it only when intended.
If a large z-* value does not bring an element forward, inspect its ancestor stacking contexts and clipping containers. Raising the number alone may not solve the problem.
<article class="relative rounded-2xl border bg-white p-6">
<span class="absolute right-4 top-4 rounded-full bg-emerald-100 px-2.5 py-1 text-xs font-semibold text-emerald-800">
Active
</span>
<h2 class="pr-20 text-lg font-semibold">Website refresh</h2>
<p class="mt-2 text-sm leading-6 text-slate-600">Update the component library and audit responsive behavior.</p>
</article>relative, so the badge's absolute offsets are anchored to the card rather than the page. pr-20 reserves space for the badge so the title does not collide with it.