Positioning & Z-Index in Tailwind CSS
From the Tailwind CSS cheat sheet · Layout · verified Jul 2026
Positioning & Z-Index
Position elements and control stacking order.
html
<!-- Position -->
<div class="relative">
<div class="absolute top-0 right-0">Badge</div>
</div>
<nav class="fixed top-0 w-full">Navbar</nav>
<nav class="sticky top-0">Sticky nav</nav>
<!-- Inset & z-index -->
<div class="inset-0">Full overlay</div>
<div class="z-10">Above</div>
<div class="z-50">Topmost</div>💡 inset-0 is shorthand for top-0 right-0 bottom-0 left-0 — perfect for overlays
⚡ sticky top-0 makes an element stick to the top when scrolling past it
📌 absolute elements position relative to the nearest relative/absolute/fixed parent
🟢 Use -z-10 for negative z-index — places element behind the default layer
positionz-indexstickyfixed