Tailwind CSS - Top / Right / Bottom / Left

Tailwind CSS - Top / Right / Bottom / Left

The top, right, bottom, left, and inset utilities are used to precisely position elements within a positioned parent. These utilities are essential for creating overlays, custom layouts, and decorating elements with badges or icons.

A Prerequisite: The position Property

Crucial Point: These utilities have no effect unless the element you are applying them to has a position property set to absolute, relative, fixed, or sticky. The positioning is relative to the nearest ancestor element that has its own position property set (other than static).

Understanding the Placement Utilities

Instead of an exhaustive list, it’s better to understand the patterns. The * placeholder corresponds to a key in your theme.spacing configuration or an arbitrary value.

Class Pattern	Description
top-* / right-* / bottom-* / left-*	Controls a single side (e.g., top-0, left-4).
inset-*	A shorthand that controls all four sides at once (e.g., inset-0 is equivalent to top-0 right-0 bottom-0 left-0).
inset-x-* / inset-y-*	Shorthands for horizontal (left, right) and vertical (top, bottom) sides respectively.
start-* / end-*	Logical properties that map to left/right based on text direction (LTR/RTL), ideal for internationalization.
Negative values (-top-4)	Prefix with a dash to use negative values, pulling an element outside its parent’s bounds.
Arbitrary values (top-[15px])	Use square brackets for any custom value.

Practical Examples

Example 1: Creating a Notification Badge

This common UI pattern places a small notification dot on the corner of an icon or button. We use a relative parent and an absolute child, positioned with top-0 and right-0.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Notification Badge</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">

  <!-- The parent needs to be 'relative' to act as the positioning context -->
  <button class="relative bg-blue-500 text-white p-3 rounded-full hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-offset-2">
    <!-- Bell Icon (SVG) -->
    <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="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"></path></svg>

    <!-- The absolute-positioned badge -->
    <span class="absolute top-0 right-0 block h-3 w-3 rounded-full bg-red-500 ring-2 ring-white"></span>
  </button>

</body>
</html>

Example 2: Centering an Element with inset and translate

A classic centering technique. By setting an element to be absolute with inset-0, it tries to fill its parent. We can then use flex and items-center/justify-center on the parent, or translate utilities on the child itself to perfectly center it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Centering with Inset</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 p-8">

  <h2 class="text-2xl font-bold mb-4">Modal Overlay Example</h2>

  <!-- The parent defines the boundary for the centered element -->
  <div class="relative h-96 w-full bg-white rounded-lg shadow-lg">
    <!-- This element is now perfectly centered -->
    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-indigo-500 text-white p-8 rounded-lg">
      <p class="font-bold">I am perfectly centered!</p>
    </div>
  </div>

</body>
</html>

Best Practices and Debugging

• Forgot relative? The most common mistake is forgetting to add relative to the parent container. If you omit this, your absolute element will be positioned relative to the <body> or the next positioned ancestor.
• Full-Screen Overlay: To create a full-screen modal or overlay, use fixed inset-0 on your overlay div. This positions it relative to the viewport and makes it cover the entire screen.
• Logical Properties for i18n: When building applications that need to support right-to-left (RTL) languages, prefer start-* and end-* over left-* and right-* to ensure your layout flips correctly automatically.
• Stacking with z-index: When elements overlap, use z-index utilities (e.g., z-10, z-20) to control which element appears on top.