Tailwind CSS - Position

Element Positioning with Tailwind CSS

Tailwind CSS provides utility classes to control the position property of an element, allowing you to build complex layouts with ease. These utilities map directly to the standard CSS position values.

Core Position Utilities

These are the fundamental classes for setting an element’s position.

Class	CSS Property	Description
static	position: static;	Default value. The element is positioned according to the normal document flow.
relative	position: relative;	The element is positioned relative to its normal position. Crucially, it creates a new positioning context for absolute child elements.
absolute	position: absolute;	The element is removed from the normal flow and positioned relative to its nearest relative, absolute, fixed, or sticky ancestor.
fixed	position: fixed;	The element is removed from the normal flow and positioned relative to the viewport. It stays in the same place even when the page is scrolled.
sticky	position: sticky;	A hybrid of relative and fixed. The element scrolls with the page until it reaches a specified offset (e.g., top-0), at which point it ‘sticks’ to that position.

Pro Tip: When using absolute, fixed, or sticky, you must also use placement utilities (like top-0, left-4, inset-0, etc.) to specify the element’s final location.

Practical Application Examples

Theory is great, but let’s see how these utilities are used to build common UI patterns.

1. Relative and Absolute: Notification Badge

A classic use case is placing a notification badge on an icon. The parent wrapper is relative to establish a positioning context, and the badge itself is absolute.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Notification Badge</title>
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
  <button class="relative bg-blue-500 hover:bg-blue-600 text-white p-3 rounded-full">
    <!-- Bell Icon (SVG or Font Icon) -->
    <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6 6 0 10-12 0v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /></svg>

    <!-- Absolute positioned badge -->
    <span class="absolute top-0 right-0 h-5 w-5 bg-red-500 rounded-full flex items-center justify-center text-xs font-bold">3</span>
  </button>
</body>
</html>

2. Fixed: Site Header

The fixed utility is perfect for creating headers or navigation bars that stay visible at the top of the viewport as the user scrolls.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Fixed Header</title>
</head>
<body>
  <!-- The fixed header -->
  <header class="fixed top-0 left-0 right-0 bg-white shadow-md p-4 z-10">
    <p class="text-center font-bold text-lg">My Awesome Site</p>
  </header>

  <!-- Dummy content to enable scrolling -->
  <main class="mt-20 p-8">
    <div class="h-[200vh] bg-gray-100 rounded-lg p-4">
      <p>Scroll down to see the header stay in place.</p>
    </div>
  </main>
</body>
</html>

3. Sticky: Section Index

sticky is ideal for elements that should scroll with their container but then ‘stick’ at a certain point, like a sidebar or a section title.

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.tailwindcss.com"></script>
  <title>Sticky Element</title>
</head>
<body class="p-8">
  <div class="flex gap-8">
    <!-- Main Content -->
    <div class="w-2/3 space-y-8">
      <section id="section1"><h2 class="text-2xl font-bold">Section 1</h2><p class="mt-2 h-96 bg-gray-200 p-4 rounded">Content for section 1...</p></section>
      <section id="section2"><h2 class="text-2xl font-bold">Section 2</h2><p class="mt-2 h-96 bg-gray-200 p-4 rounded">Content for section 2...</p></section>
      <section id="section3"><h2 class="text-2xl font-bold">Section 3</h2><p class="mt-2 h-96 bg-gray-200 p-4 rounded">Content for section 3...</p></section>
    </div>

    <!-- Sticky Sidebar -->
    <aside class="w-1/3">
      <div class="sticky top-8 bg-blue-100 p-4 rounded-lg">
        <h3 class="font-bold mb-2">On this page</h3>
        <ul>
          <li><a href="#section1" class="hover:underline">Section 1</a></li>
          <li><a href="#section2" class="hover:underline">Section 2</a></li>
          <li><a href="#section3" class="hover:underline">Section 3</a></li>
        </ul>
      </div>
    </aside>
  </div>
</body>
</html>