Bird
Raised Fist0
Tailwindmarkup~5 mins

Top, right, bottom, left offsets in Tailwind

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
Introduction

Offsets help you move elements away from the edges of their container. They control space from the top, right, bottom, or left sides.

You want to move a button down a little from the top of the page.
You need to push a box away from the right edge of its container.
You want to add space below a header without changing margins.
You want to position a tooltip a bit above or below an element.
You want to nudge an image slightly to the left inside a card.
Syntax
Tailwind
top-{size}
right-{size}
bottom-{size}
left-{size}

Replace {size} with Tailwind spacing values like 0, 1, 2, 4, 8, etc.

These classes work when the element has relative, absolute, or fixed positioning.

Examples
This moves the element 1rem down from its normal position (top offset).
Tailwind
<div class="relative top-4">Content</div>
This places the element 2rem away from the right edge of its positioned container.
Tailwind
<div class="absolute right-8">Box</div>
This fixes the element 0.5rem above the bottom and 0.5rem from the left of the viewport.
Tailwind
<div class="fixed bottom-2 left-2">Fixed Box</div>
Sample Program

This example shows a box with four smaller boxes positioned inside it using top, right, bottom, and left offsets. Each small box is moved away from the edges by 1rem (4 in Tailwind spacing).

Tailwind
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Top, Right, Bottom, Left Offsets Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="relative h-screen bg-gray-100">
  <div class="relative bg-white p-4 w-64 h-40 border border-gray-300">
    <div class="absolute top-4 left-4 bg-blue-500 text-white p-2 rounded">
      Top Left Offset
    </div>
    <div class="absolute top-4 right-4 bg-green-500 text-white p-2 rounded">
      Top Right Offset
    </div>
    <div class="absolute bottom-4 left-4 bg-red-500 text-white p-2 rounded">
      Bottom Left Offset
    </div>
    <div class="absolute bottom-4 right-4 bg-yellow-500 text-black p-2 rounded">
      Bottom Right Offset
    </div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Offsets only work if the element has a positioning context like relative, absolute, or fixed.

Use Tailwind spacing scale for consistent spacing (e.g., 1 = 0.25rem, 4 = 1rem).

Offsets move the element visually but do not affect the space it takes in the normal page flow.

Summary

Top, right, bottom, and left offsets move elements away from container edges.

They require the element to have a position other than static.

Use Tailwind classes like top-4, right-8 to set these offsets easily.

Practice

(1/5)
1. Which Tailwind class moves an element 1rem down from the top edge when it has relative positioning?
easy
A. right-4
B. bottom-4
C. left-4
D. top-4

Solution

  1. Step 1: Understand Tailwind spacing scale

    In Tailwind, 4 equals 1rem spacing.

  2. Step 2: Identify offset direction

    bottom-4 moves the element 1rem down from the top edge when positioned.

  3. Final Answer:

    bottom-4 -> Option B

  4. Quick Check:

    Bottom offset 1rem = bottom-4 [OK]
Hint: Bottom offset uses bottom- plus spacing number [OK]
Common Mistakes:
  • Confusing top with bottom classes
  • Using offset classes without positioning
  • Mixing left/right with top offsets
2. Which is the correct Tailwind class to move an element 2rem to the right from its container edge?
easy
A. left-8
B. right-2
C. right-8
D. top-8

Solution

  1. Step 1: Know Tailwind spacing values

    Spacing 8 equals 2rem in Tailwind.

  2. Step 2: Match direction and spacing

    left-8 moves element 2rem to the right from its container edge.

  3. Final Answer:

    left-8 -> Option A

  4. Quick Check:

    Left offset 2rem = left-8 [OK]
Hint: Left offset uses left- plus spacing number [OK]
Common Mistakes:
  • Using right-2 which is 0.5rem, not 2rem
  • Confusing left and right classes
  • Using top or bottom classes for horizontal offset
3. What will be the visual effect of this HTML snippet?
<div class="relative">
  <div class="absolute top-6 left-4">Box</div>
</div>
medium
A. The inner box stays at the top-left corner with no offset.
B. The inner box moves 1.5rem up and 1rem left inside the relative container.
C. The inner box moves 6rem down and 4rem right inside the relative container.
D. The inner box moves 1.5rem down and 1rem right inside the relative container.

Solution

  1. Step 1: Understand Tailwind spacing scale

    top-6 means 1.5rem down, left-4 means 1rem right offset.

  2. Step 2: Positioning context

    The parent is relative, so absolute child offsets from parent's edges.

  3. Final Answer:

    The inner box moves 1.5rem down and 1rem right inside the relative container. -> Option D

  4. Quick Check:

    top-6 = 1.5rem down, left-4 = 1rem right [OK]
Hint: Absolute inside relative uses offsets from parent edges [OK]
Common Mistakes:
  • Thinking top-6 moves element up
  • Ignoring relative positioning on parent
  • Confusing left offset direction
4. Identify the error in this Tailwind usage:
<div class="absolute top-4 right-4">Hello</div>
when the parent has no positioning class.
medium
A. No error; offsets work relative to viewport by default.
B. The classes top-4 and right-4 are invalid.
C. Offsets won't work as expected because parent is not positioned.
D. The element must have relative class instead of absolute.

Solution

  1. Step 1: Understand positioning context

    An absolute element positions relative to nearest positioned ancestor.

  2. Step 2: Check parent positioning

    If parent has no position (static by default), offsets relate to viewport, which may cause unexpected placement.

  3. Final Answer:

    Offsets won't work as expected because parent is not positioned. -> Option C

  4. Quick Check:

    Absolute needs positioned parent for expected offsets [OK]
Hint: Absolute offsets need positioned parent (relative/absolute/fixed) [OK]
Common Mistakes:
  • Assuming offsets always relate to parent
  • Thinking classes are invalid
  • Confusing absolute with relative positioning
5. You want to place a notification badge 0.75rem from the top and 0.5rem from the right inside a relative container. Which Tailwind classes achieve this?
hard
A. top-3 right-2
B. top-2 right-3
C. top-4 right-4
D. top-6 right-1

Solution

  1. Step 1: Match spacing scale to rem values

    In Tailwind, 3 equals 0.75rem and 2 equals 0.5rem spacing.

  2. Step 2: Assign correct classes for top and right offsets

    Use top-3 for 0.75rem top offset and right-2 for 0.5rem right offset.

  3. Final Answer:

    top-3 right-2 -> Option A

  4. Quick Check:

    top-3 = 0.75rem, right-2 = 0.5rem [OK]
Hint: Use Tailwind spacing scale: 3=0.75rem, 2=0.5rem for offsets [OK]
Common Mistakes:
  • Mixing up spacing numbers and rem values
  • Using larger spacing than needed
  • Forgetting to set parent position to relative