Position Offset Utilities top/right/bottom/left

Control the placement of positioned elements with top, right, bottom, and left offset utilities.

Quick Reference

top-0

Align to top edge

top: 0px

right-4

16px from right

right: 1rem

bottom-8

32px from bottom

bottom: 2rem

left-1/2

50% from left

left: 50%

inset-0

All sides 0

top/right/bottom/left: 0

inset-x-4

Horizontal inset

left/right: 1rem

inset-y-2

Vertical inset

top/bottom: 0.5rem

-top-4

Negative offset

top: -1rem

Interactive Examples

Basic Position Offsets

top-0 left-0
top-4 right-4
bottom-0 left-0
bottom-4 right-0
Centered
<div class="absolute top-4 right-4">Positioned</div>

Inset Utilities

inset-0 (Full overlay)

Full overlay

inset-x-4 (Horizontal inset)

Horizontal inset

inset-y-2 (Vertical inset)

Vertical inset

Negative Offsets

-top-4 -left-4
-top-2 -right-2
-bottom-4 left-4
top-4 -right-6

✓ Elements can extend outside container

✓ Useful for overlapping effects

⚠️ May require overflow-visible on parent

Responsive Positioning

Responsive position
Changes on md+

✓ Position changes based on screen size

✓ Great for mobile-first design

✓ Combine with responsive positioning types

<div class="absolute top-2 left-2 md:top-4 md:right-4">
  Responsive positioning
</div>

Common Use Cases

🎯 Tooltips

Position tooltips relative to trigger elements.

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

🏷️ Badges

Position notification badges on buttons or avatars.

<span class="absolute -top-1 -right-1">

🖼️ Image Overlays

Create full or partial overlays on images.

<div class="absolute inset-0">

📱 Fixed Elements

Position fixed headers, footers, or floating buttons.

<div class="fixed top-0 left-0 right-0">

🎨 Decorative Elements

Position decorative shapes or backgrounds.

<div class="absolute -top-4 -left-4">

📊 Chart Annotations

Position labels and annotations on charts.

<div class="absolute top-1/4 left-3/4">

Position Values Reference

Spacing Scale

top-00px
top-px1px
top-14px
top-28px
top-416px
top-832px
top-1664px
top-32128px

Percentage Values

top-1/250%
top-1/333.333%
top-2/366.667%
top-1/425%
top-3/475%
top-full100%

✓ Percentage values are relative to the containing block

✓ Useful for responsive positioning

✓ Combine with transform for centering

Best Practices

✅ Do

  • • Use inset-0 for full overlays
  • • Combine percentage values with transform for centering
  • • Use negative values for overlapping effects
  • • Test positioning on different screen sizes
  • • Use responsive variants for mobile-first design
  • • Consider z-index when elements overlap

❌ Don't

  • • Use positioning offsets on static elements
  • • Forget about overflow when using negative values
  • • Use complex positioning when simpler solutions exist
  • • Ignore accessibility when positioning content
  • • Use fixed positioning without considering mobile
  • • Create overly complex positioning hierarchies

Related Layout Classes

static

Position utilities

top-*

Current page

z-*

Z-index utilities

visible

Visibility utilities