Top / Right / Bottom / Left

Controls the placement of positioned elements (absolute, fixed, or sticky) by setting the distance from each edge of their containing box. These utilities are used with positioned elements to precisely control their location. In Tailwind v4, these utilities support logical properties for better RTL language support and have improved integration with layout containment.

Layout2 variants4 examples

Official Docs Open Playground

Basic usage:

<div class="relative h-32 w-full bg-gray-200">
  <div class="absolute inset-0 bg-blue-200 bg-opacity-50">Full overlay (inset-0)</div>
</div>

Examples

Using inset-0 to create a full overlay within a container

<div class="relative h-32 w-full bg-gray-200">
  <div class="absolute inset-0 bg-blue-200 bg-opacity-50">Full overlay (inset-0)</div>
</div>

Edit in playground

Positioning elements in the four corners of a container

<div class="relative h-64 w-full bg-gray-200">
  <div class="absolute top-0 right-0 bg-red-500 p-2 text-white">Top Right</div>
  <div class="absolute top-0 left-0 bg-blue-500 p-2 text-white">Top Left</div>
  <div class="absolute bottom-0 right-0 bg-green-500 p-2 text-white">Bottom Right</div>
  <div class="absolute bottom-0 left-0 bg-yellow-500 p-2 text-white">Bottom Left</div>
</div>

Edit in playground

Notification badge positioned at the top-right of an icon

<!-- Notification badge on an icon -->
<div class="relative inline-block">
  <svg class="w-8 h-8 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"></path>
  </svg>
  <div class="absolute top-0 right-0 -mt-1 -mr-1 bg-red-500 text-white text-xs font-bold rounded-full h-5 w-5 flex items-center justify-center">3</div>
</div>

Edit in playground

Hero section with background image and centered content using absolute positioning

<!-- Hero section with centered content and image background -->
<div class="relative h-96 overflow-hidden">
  <!-- Background image with overlay -->
  <div class="absolute inset-0">
    <img src="example.jpg" alt="Background" class="w-full h-full object-cover">
    <div class="absolute inset-0 bg-black bg-opacity-40"></div>
  </div>
  <!-- Centered content -->
  <div class="absolute inset-0 flex items-center justify-center">
    <div class="text-white text-center p-4">
      <h1 class="text-4xl font-bold mb-4">Welcome to our Website</h1>
      <p class="text-xl mb-6">Discover amazing features and content</p>
      <button class="bg-white text-gray-900 px-6 py-3 rounded-lg font-medium">Get Started</button>
    </div>
  </div>
</div>

Edit in playground

Live Preview

Try the Top / Right / Bottom / Left utility with different values

Open Interactive Playground

Variants

inset: all sides at once; inset-x: left and right; inset-y: top and bottom; top/right/bottom/left: individual sides; start/end: logical properties for RTL support (start corresponds to left in LTR and right in RTL)

insetinset-xinset-ytoprightbottomleftstartend