Position

Determines how an element is positioned in the document flow. This fundamental layout utility influences how elements are stacked, how they interact with other elements, and how they respond to scrolling. In Tailwind v4, position utilities are enhanced with better interoperability with other layout utilities like Grid and Flexbox.

Layout1 variant4 examples

Official Docs Open Playground

Basic usage:

<div class="relative bg-gray-200 p-8 h-32">
  <div class="absolute top-0 right-0 bg-blue-500 text-white p-2">Absolute to parent</div>
  <p>This is the relative parent container.</p>
</div>

Examples

Basic positioning with relative parent and absolute child

<div class="relative bg-gray-200 p-8 h-32">
  <div class="absolute top-0 right-0 bg-blue-500 text-white p-2">Absolute to parent</div>
  <p>This is the relative parent container.</p>
</div>

Edit in playground

Sticky header that remains visible while scrolling

<div class="h-64 bg-gray-100 p-8 overflow-y-auto relative">
  <div class="sticky top-0 bg-white z-10 p-4 border-b font-bold">Sticky Header</div>
  <div class="py-4">
    <p>Content that will scroll beneath the sticky header...</p>
    <p class="mt-4">More content to enable scrolling.</p>
    <p class="mt-4">Keep scrolling to see the sticky header in action.</p>
    <p class="mt-4">Even more content to ensure scrolling is possible.</p>
  </div>
</div>

Edit in playground

Fixed navigation bar that remains in place while the page scrolls

<!-- Fixed navigation with scrollable content -->
<div class="h-64 bg-gray-100 relative">
  <div class="fixed top-0 left-0 right-0 bg-blue-600 text-white p-4">
    <div class="mx-auto max-w-7xl flex justify-between items-center">
      <div class="font-bold">Fixed Navigation</div>
      <div class="flex space-x-4">
        <a href="#" class="hover:text-blue-200">Home</a>
        <a href="#" class="hover:text-blue-200">About</a>
        <a href="#" class="hover:text-blue-200">Contact</a>
      </div>
    </div>
  </div>
  <div class="pt-16 p-4"><!-- Adjust padding-top to account for fixed header -->
    <h2 class="text-xl font-bold mb-4">Page Content</h2>
    <p>This content scrolls beneath the fixed navigation bar.</p>
  </div>
</div>

Edit in playground

Modal overlay using fixed positioning to appear above page content

<!-- Modal or dialog with an overlay -->
<div class="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
  <div class="bg-white rounded-lg shadow-xl max-w-md w-full p-6 m-4 relative">
    <button class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
      </svg>
    </button>
    <h2 class="text-xl font-bold mb-4">Modal Title</h2>
    <p class="mb-6">This modal uses fixed positioning to display over the page content with an overlay.</p>
    <div class="flex justify-end space-x-2">
      <button class="px-4 py-2 border rounded hover:bg-gray-100">Cancel</button>
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">Confirm</button>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Position utility with different values

Open Interactive Playground

Variants

static: default normal flow positioning; relative: positioned relative to normal position, creates a positioning context; absolute: positioned relative to nearest positioned ancestor; fixed: positioned relative to viewport, stays in place during scrolling; sticky: hybrid of relative and fixed, toggles between them based on scroll position

staticrelativeabsolutefixedsticky