Tailwindmarkup~5 mins

Position utilities (relative, absolute, fixed) in Tailwind

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Introduction

Position utilities help you place elements exactly where you want on the page. They control how elements move and stay in place.

You want to place a button at the bottom right corner of a box.

You need a menu to stay visible on the screen even when scrolling.

You want to layer images or text on top of each other.

You want to move an element slightly from its normal spot.

You want a header to stay fixed at the top while scrolling.

Syntax

Tailwind

relative
absolute
fixed

relative moves the element relative to its normal place.

absolute places the element relative to the nearest positioned parent.

fixed keeps the element fixed on the screen even when scrolling.

Examples

This sets the element as a reference point for absolutely positioned children.

Tailwind

<div class="relative">...</div>

This places the element at the top right corner of its nearest positioned parent.

Tailwind

<div class="absolute top-0 right-0">...</div>

This fixes the element at the bottom left corner of the screen, even when scrolling.

Tailwind

<div class="fixed bottom-0 left-0">...</div>

Sample Program

This example shows a white box with relative positioning. Inside it, two buttons are placed absolutely at the top right and bottom left corners. Also, a red box is fixed at the bottom left of the screen and stays visible when you scroll.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Position Utilities Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 p-6">
  <section class="relative bg-white border border-gray-300 rounded-lg p-6 w-64 h-40">
    <p class="mb-4">This box is <strong>relative</strong> positioned.</p>
    <button class="absolute top-2 right-2 bg-blue-600 text-white px-3 py-1 rounded">Top Right</button>
    <button class="absolute bottom-2 left-2 bg-green-600 text-white px-3 py-1 rounded">Bottom Left</button>
  </section>

  <div class="fixed bottom-4 left-4 bg-red-600 text-white px-4 py-2 rounded shadow-lg">
    Fixed at bottom left of screen
  </div>
</body>
</html>

OutputSuccess

Important Notes

Use relative on a parent to make absolute children position relative to it.

fixed elements stay visible on screen even when you scroll the page.

Combine position utilities with top, right, bottom, left classes to move elements.

Summary

Position utilities control where elements appear on the page.

relative moves elements from their normal spot.

absolute places elements relative to the nearest positioned parent.

fixed keeps elements visible on screen during scrolling.