Positioning Relative Absolute Fixed Sticky in TailwindCSS
? Positioning Utilities in Tailwind CSS
Tailwind provides easy-to-use classes to control the CSS position property, helping you place elements relative to their normal flow or the viewport.
Tailwind Position Classes
| Class | CSS Equivalent | Description |
|---|---|---|
static | position: static; | Default positioning (normal flow) |
relative | position: relative; | Positioned relative to its normal spot |
absolute | position: absolute; | Positioned relative to nearest positioned ancestor |
fixed | position: fixed; | Positioned relative to viewport |
sticky | position: sticky; | Sticks based on scroll position |
Usage Examples
1. Relative Positioning
<div class="relative top-2 left-4 bg-blue-200 p-4"> I am moved 0.5rem down and 1rem right from my normal spot.</div>2. Absolute Positioning
<div class="relative h-48 bg-gray-100"> <div class="absolute top-4 right-4 bg-red-400 p-2"> Absolutely positioned inside relative container </div></div>3. Fixed Positioning
<div class="fixed bottom-0 left-0 w-full bg-black text-white p-4 text-center"> Fixed footer always visible</div>4. Sticky Positioning
<div class="sticky top-0 bg-white shadow p-4"> I stick to the top when you scroll past me.</div>Position Offsets
You can use utilities for top, right, bottom, and left with spacing values:
| Class Example | CSS Equivalent |
|---|---|
top-0 | top: 0; |
right-4 | right: 1rem; |
bottom-8 | bottom: 2rem; |
left-1/2 | left: 50%; |
Responsive and State Variants
<div class="relative md:absolute lg:fixed top-0"> Responsive positioning</div>Would you like an example layout demonstrating these positioning utilities?
