❮ Previous Next ❯

Offset Utilities

  • Control element placement using top, right, bottom, and left positioning utilities.

  • What Are Offset Utilities ? 

    Offset utilities control how far a positioned element moves from a specific edge.

    They work only when an element has a position type other than static.

    In simple words:

    Position decides how an element can move
    Offset decides where it moves

    In Tailwind CSS, offset utilities map directly to CSS properties:

    • top

    • right

    • bottom

    • left

    When Offset Utilities Work

    Offset utilities only work with:

    • relative

    • absolute

    • fixed

    • sticky

    They do NOT work with:

    • static (default)

Offset Position Rule

Offset utilities work only with positioned elements like absolute. 

<!-- This will NOT work -->
<div class="top-0 left-0">
  Nothing happens
</div>

<!-- This works -->
<div class="absolute top-0 left-0">
  Positioned correctly
</div>

  • Offset Scale in Tailwind 

    Offset utilities use the spacing scale, just like margin and padding.

    Examples:

    top-0

    top-1

    top-2

    top-4

    top-8

    top-1/2

    top-full

    These values represent:

    • Fixed spacing

    • Percentages

    • Full element size

      Top Utility

      What top-* Does

      top-* controls the distance from the top edge of the positioning context.

    Top Offset

    Positions an element a small distance from the top using top-2. 

    <div class="relative h-40">
  <span class="absolute top-2 left-2">
    Badge
  </span>
</div>

    • Used for:

      • Badges

      • Close buttons

      • Dropdown alignment

      • Sticky headers (top-0)

    Sticky Navbar

    Keeps the header fixed at the top while scrolling. 

    <header class="sticky top-0 bg-white shadow">
  Navbar
</header>

    • Right Utility

      What right-* Does

      right-* controls the distance from the right edge.

    Close Button Position

    Positions a close button at the top-right inside a relative container. 

    <div class="relative">
  <button class="absolute top-2 right-2">
    ✕
  </button>
</div>

    • Used for:

      • Close icons

      • Action buttons

      • Notification indicators

      Bottom Utility

      What bottom-* Does

      bottom-* controls the distance from the bottom edge.

    Fixed Chat Button

    Fixes a chat button at the bottom-right of the viewport. 

    <button class="fixed bottom-4 right-4">
  Chat
</button>

    • Used for:

      • Floating action buttons

      • Toast notifications

      • Sticky footers

      Left Utility

      What left-* Does

      left-* controls the distance from the left edge.

    Left Sidebar Indicator

    Positions a vertical indicator on the left side using left-0. 

    <div class="relative">
  <span class="absolute left-0 top-0 h-full w-1 bg-blue-500"></span>
</div>

    • Used for:

      • Active indicators

      • Sidebars

      • Decorative accents

        Combining Offsets

        Most real UI uses multiple offsets together.

      Corner Positioning

      Uses multiple offsets to position elements in different corners. 

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

<div class="absolute bottom-0 left-0">
  Bottom-left corner
</div>

      • Offsets define the anchor point.

        Percentage & Special Values

      Center with Percent

      Positions an element halfway from the top and left using percentages. 

      <div class="absolute top-1/2 left-1/2">
  Halfway positioned
</div>

      • inset-0 is a shortcut for:

        • top-0

        • right-0

        • bottom-0

        • left-0

      Negative Offset

      Uses negative offsets to position an element outside its normal edge. 

      <div class="absolute -top-2 -right-2">
  Overlapping badge
</div>

      • Used for:

        • Notification dots

        • Decorative elements

        Use negative offsets carefully.

        Offsets vs Margin
        OffsetMargin
        Moves positioned elementsMoves normal flow elements
        Requires positionNo position needed
        Used for overlaysUsed for layout spacing

        Never replace margin with offsets for layout.

        Common Mistakes

        • Forgetting to set position

        • Expecting offsets to work on static elements

        • Using offsets to fix layout problems

        • Overusing negative offsets

        • Not understanding reference point

        If elements jump unexpectedly → offset logic is wrong.

        Offset Usage Rules

        • Always define position first

        • Use offsets only for floating elements

        • Combine with relative parent

        • Keep values consistent

        • Avoid offsets for main layout

        • Prefer inset when covering full areas

        Offsets should feel intentional and predictable.
      ❮ Previous Next ❯