Layout & Positioning
Control document flow, element placement, overlay stacking, and scrolling behavior using Tailwind positioning utilities.
1. Display Modes
| Class | CSS Property | Description |
|---|---|---|
block | display: block; | Takes full row width |
inline-block | display: inline-block; | Flows inline but accepts width/height |
flex | display: flex; | Creates a flex container |
grid | display: grid; | Creates a grid container |
hidden | display: none; | Hides element completely from DOM layout |
2. Positioning (`relative`, `absolute`, `fixed`, `sticky`)
Live Demo: `absolute` Badge in `relative` Container
HOT
Product Card
Premium Wireless Headphones
HTML Code:
<div className="relative w-64 bg-white p-6 rounded-xl border">
<!-- Absolute Badge Positioned Relative to Card Parent -->
<span className="absolute -top-2 -right-2 bg-red-500 text-white px-2.5 py-1 rounded-full">
HOT
</span>
<h5>Product Card</h5>
</div>3. Sticky Headers (`sticky top-0`)
Keep top navigation bars stuck to the top of the viewport when scrolling:
<header className="sticky top-0 z-50 bg-white/80 backdrop-blur-md border-b">
<nav className="max-w-7xl mx-auto px-4 py-3 flex justify-between">
<span className="font-bold">Sticky Header Navbar</span>
</nav>
</header>4. Stacking Order (`z-index`)
Control element layering using z-0, z-10, z-20, z-30, z-40, z-50, or custom values z-[999].
Next Up
Learn border widths, colors, radius (rounded corners), box shadows, and focus rings.
Next Lesson: Borders & Shadows →
