Position Utilities `position-*`

Control how elements are positioned in the document flow with static, relative, absolute, fixed, and sticky positioning.

Quick Reference

static

Default positioning

position: static

relative

Relative to normal position

position: relative

absolute

Relative to positioned parent

position: absolute

fixed

Relative to viewport

position: fixed

sticky

Sticky positioning

position: sticky

Interactive Examples

Static Position (Default)

Element 1 (static)

Element 2 (static) - top/left properties ignored

Element 3 (static)

✓ Normal document flow

✓ No positioning offsets

✓ Default behavior for all elements

<div class="static">Static element</div>

Relative Position

Element 1 (static)

Element 2 (relative) - offset from normal position

Element 3 (static) - space preserved above

✓ Offset from normal position

✓ Original space preserved

✓ Creates positioning context

<div class="relative top-4 left-8">Relative element</div>

Absolute Position

Relative container

Absolute (top-4 right-4)

Absolute (bottom-4 left-4)

Centered

✓ Positioned relative to nearest positioned ancestor

✓ Removed from document flow

✓ Can overlap other elements

Fixed Position

Normal content flows here

Fixed elements are positioned relative to the viewport.
They stay in place when scrolling.
Common for headers, footers, and floating action buttons.

Sticky Position

Content before sticky element

Sticky Header (sticks to top when scrolling)

{Array.from({ length: 10 }, (_, i) => (

Content item {i + 1}

))}

✓ Switches between relative and fixed

✓ Sticks when reaching threshold

✓ Great for section headers

<div class="sticky top-0">Sticky header</div>

Common Use Cases

📱 Fixed Headers

Keep navigation visible while scrolling.

<header class="fixed top-0 w-full">

🎯 Tooltips & Popovers

Position tooltips relative to trigger elements.

<div class="absolute top-full left-0">

📌 Sticky Sidebars

Keep sidebar content visible during scroll.

<aside class="sticky top-4">

🖼️ Image Overlays

Position text or icons over images.

<div class="absolute inset-0">

🔘 Floating Buttons

Create floating action buttons.

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

📊 Table Headers

Keep table headers visible when scrolling.

<thead class="sticky top-0">

Position Behavior Guide

Position Types Explained

static

Default positioning. Element follows normal document flow. Top/right/bottom/left properties have no effect.

relative

Positioned relative to its normal position. Creates a positioning context for absolutely positioned children.

absolute

Positioned relative to the nearest positioned ancestor. Removed from normal document flow.

fixed

Positioned relative to the viewport. Stays in place when scrolling. Removed from document flow.

sticky

Hybrid of relative and fixed. Sticks to a specified position when scrolling reaches a threshold.

Positioning Context

What Creates Context?

• position: relative
• position: absolute
• position: fixed
• position: sticky
• Elements with transform
• Elements with filter

How It Works

Absolutely positioned elements are positioned relative to their nearest positioned ancestor. If no positioned ancestor exists, they're positioned relative to the initial containing block (usually the viewport).

Best Practices

✅ Do

• Use relative to create positioning context
• Use sticky for section headers and navigation
• Test fixed elements on mobile devices
• Consider z-index stacking when using positioned elements
• Use absolute for overlays and tooltips
• Provide fallbacks for sticky positioning

❌ Don't

• Overuse absolute positioning for layout
• Forget about mobile viewport issues with fixed elements
• Use positioning when flexbox or grid would be better
• Ignore accessibility when hiding content off-screen
• Create overly complex positioning hierarchies
• Use fixed positioning without considering scroll behavior

Related Layout Classes