Position Types in Tailwind CSS

1. Types of Position

• static – Default positioning
• relative – Positioned relative to its normal position
• absolute – Positioned relative to the nearest ancestor with positioning
• fixed – Fixed to the viewport
• sticky – Scrolls until a threshold, then sticks

2. Tailwind Utility Classes

.position-static   { position: static; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.position-fixed    { position: fixed; }
.position-sticky   { position: sticky; }
            

3. Example: Absolute Positioning

This places an element inside a relatively positioned container:

<div class="relative w-64 h-40 bg-gray-200">
    <div class="absolute top-2 right-2 bg-blue-500 text-white px-2 py-1">
        Absolute Box
    </div>
</div>
            

4. Example: Sticky Header

Sticky headers remain visible as you scroll:

<div class="sticky top-0 bg-white shadow z-10">
    <h1 class="text-xl font-bold p-4">Sticky Header</h1>
</div>
            

5. When to Use Each Position Type

• Static: For most elements (default).
• Relative: For offsetting elements slightly.
• Absolute: For overlays inside containers.
• Fixed: For elements like sticky navbars or modals.
• Sticky: For scroll-linked headers, menus, etc.

Conclusion

Understanding position types helps you control layout behavior and interactions. Combine these with spacing and z-index utilities for full control over stacking and flow.