Tailwind CSS Positioning — Relative, Absolute, Fixed, and Sticky

In this tutorial, you will learn about Tailwind CSS Positioning. We cover key concepts, practical examples, and best practices to help you master this topic.

Tailwind CSS positioning utilities control the position property (static, relative, absolute, fixed, sticky) and inset values (top-, right-, bottom-, left-) for precise element placement.

What You'll Learn

You will learn how to use each position value, control placement with inset utilities, stack elements with z-index, and create overlays, tooltips, and sticky headers.

Why It Matters

Positioning enables overlays, fixed headers, and tooltips. DodaTech uses Tailwind positioning for Durga Antivirus Pro's modal dialogs, Doda Browser's sticky tabs, and floating action buttons.

Real-World Use

Doda Browser's extension popup uses relative positioning for the container, absolute for a notification badge, fixed for a floating help button, and sticky for section headers.

flowchart LR
    A[Sizing] --> B[Positioning]
    B --> C[Relative]
    B --> D[Absolute]
    B --> E[Fixed]
    B --> F[Sticky]
    B --> G[Z-Index]
    style B fill:#38bdf8,stroke:#0284c7,color:#fff
    style C fill:#22c55e,stroke:#16a34a,color:#fff

Relative + Absolute Positioning

<div class="relative bg-gray-100 p-8 rounded-lg h-48 max-w-md mx-auto mt-8">
  <div class="absolute top-4 left-4 bg-blue-500 text-white px-3 py-1 rounded text-sm">
    top-4 left-4
  </div>
  <div class="absolute top-4 right-4 bg-green-500 text-white px-3 py-1 rounded text-sm">
    top-4 right-4
  </div>
  <div class="absolute bottom-4 left-4 bg-purple-500 text-white px-3 py-1 rounded text-sm">
    bottom-4 left-4
  </div>
  <div class="absolute bottom-4 right-4 bg-orange-500 text-white px-3 py-1 rounded text-sm">
    bottom-4 right-4
  </div>
  <div class="absolute inset-0 flex items-center justify-center">
    <span class="text-gray-400 font-bold">inset-0 centered</span>
  </div>
</div>

Expected output: A container with labels positioned at each corner and the center using absolute positioning with inset utilities.

Fixed Positioning

<!-- Example shown as a simulated preview -->
<div class="relative border-2 border-dashed border-gray-300 rounded-lg p-4 h-64 max-w-md mx-auto overflow-hidden">
  <p class="text-sm text-gray-500 mb-2">Simulated fixed element within this box:</p>
  <div class="absolute bottom-0 left-0 right-0 bg-blue-600 text-white p-3 flex justify-between items-center">
    <span>Fixed bottom bar</span>
    <button class="bg-white text-blue-600 px-3 py-1 rounded text-sm font-bold">Action</button>
  </div>
</div>

Expected output: A bar fixed to the bottom of the viewport (or container in this simulation), staying visible while content scrolls.

Sticky Positioning

<div class="max-w-md mx-auto border rounded-lg overflow-hidden">
  <div class="h-32 bg-gradient-to-r from-blue-50 to-purple-50 flex items-center justify-center text-gray-400">
    Scrollable content area
  </div>

  <div class="sticky top-0 bg-blue-600 text-white px-4 py-2 font-bold z-10">
    Section A (sticky header)
  </div>
  <div class="p-4 space-y-4">
    <div class="bg-gray-50 p-3 rounded">Item 1</div>
    <div class="bg-gray-50 p-3 rounded">Item 2</div>
    <div class="bg-gray-50 p-3 rounded">Item 3</div>
    <div class="bg-gray-50 p-3 rounded">Item 4</div>
  </div>

  <div class="sticky top-0 bg-green-600 text-white px-4 py-2 font-bold z-10">
    Section B (sticky header)
  </div>
  <div class="p-4 space-y-4">
    <div class="bg-gray-50 p-3 rounded">Item 5</div>
    <div class="bg-gray-50 p-3 rounded">Item 6</div>
    <div class="bg-gray-50 p-3 rounded">Item 7</div>
    <div class="bg-gray-50 p-3 rounded">Item 8</div>
  </div>
</div>

Expected output: Section headers stick to the top of the scrolling container as the user scrolls through content.

Overlay with Inset

<div class="relative bg-gray-100 rounded-lg h-48 max-w-md mx-auto overflow-hidden">
  <div class="p-4">
    <h3 class="font-bold text-gray-800">Card Content</h3>
    <p class="text-gray-600 text-sm mt-2">This card has an overlay that covers the entire area.</p>
  </div>

  <!-- Full overlay -->
  <div class="absolute inset-0 bg-black/60 flex items-center justify-center">
    <span class="text-white text-lg font-bold">Overlay (inset-0)</span>
  </div>
</div>

Expected output: An overlay covers the entire card area, with centered text on top of the darkened background.

Z-Index Stacking

<div class="relative h-40 max-w-md mx-auto mt-8">
  <div class="absolute top-0 left-0 w-32 h-32 bg-blue-300 rounded-lg flex items-center justify-center z-10">
    z-10
  </div>
  <div class="absolute top-4 left-4 w-32 h-32 bg-green-300 rounded-lg flex items-center justify-center z-20">
    z-20
  </div>
  <div class="absolute top-8 left-8 w-32 h-32 bg-purple-300 rounded-lg flex items-center justify-center z-30">
    z-30
  </div>
</div>

Expected output: Three overlapping boxes stacked in order of z-index. Highest z-index appears on top.

Common Mistakes

1. Absolute Without Relative Parent

absolute positions relative to the nearest positioned ancestor. Without relative on a parent, it positions relative to the viewport.

2. Not Setting a Top/Left Value

absolute without inset values places the element at its default position (top-left of positioned ancestor). Always set top-*, left-*, or inset-*.

3. Using Fixed for Everything

fixed positions relative to the viewport and scrolls with the page. Use sticky for elements that should scroll within their container.

4. Ignoring Z-Index Context

Z-index only works on positioned elements. A high z-index on a non-positioned element has no effect.

5. Overlapping Text Without Background

Absolute elements on top of text need a background or text-shadow for readability. Add bg-white or bg-black/50.

Practice Questions

1. What is the difference between fixed and sticky? Fixed stays relative to the viewport. Sticky scrolls until its container scrolls past it, then sticks.

2. What parent position is needed for an absolute child? relative on the parent creates a positioning context for absolute children.

3. How do you center an absolute element? Combine inset-0 with flex centering, or use left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2.

4. What does inset-0 do? Sets top, right, bottom, and left all to 0, making the element fill its positioned parent.

5. How do you make a sticky header? sticky top-0 on the header element. It sticks when scrolling reaches its top position.

Challenge

Build a product card with a relative container, absolute badge (top-right sale tag), fixed add-to-cart button (sticks to bottom), and a sticky product name header when scrolling through details.

FAQ

Mini Project

Build a modal dialog: dark overlay (fixed inset-0 bg-black/50), centered modal (absolute inset-0 flex items-center justify-center), modal card (relative bg-white rounded-lg), close button (absolute top-4 right-4), and sticky footer with action buttons.

What's Next

Now master Display and Visibility utilities for show/hide, visibility, and overflow control. Use them with positioning for interactive components.