Tailwind CSS Positioning
Complete Tailwind v4 positioning reference.
Position, inset, float, overflow, and more.
Position Types
Default position (normal flow)
Positioned relative to normal position
Positioned relative to nearest positioned ancestor
Fixed to viewport (stays on scroll)
Sticky until scroll threshold
Inset Scale (top, right, bottom, left)
Inset Utilities
All Sides
inset-*All 4 sidesinset-x-*Left & rightinset-y-*Top & bottomIndividual Sides
top-* right-* bottom-* left-*Physicalstart-* end-*Logical inlineinset-s-* inset-e-*Logical inline (alias)Common Patterns
Fill Parent
<div class="absolute inset-0"> <!-- Stretches to fill parent --> </div>
Top-Left Corner
<div class="absolute top-2 left-2"> <!-- Top-left positioned --> </div>
Bottom-Right Corner
<div class="absolute bottom-2 right-2"> <!-- Bottom-right positioned --> </div>
Center (Transform)
<div class="absolute top-1/2 left-1/2
-translate-x-1/2 -translate-y-1/2">
</div>Full Width (Top)
<div class="absolute top-0 inset-x-0"> <!-- Full width at top --> </div>
Full Height (Left)
<div class="absolute left-0 inset-y-0"> <!-- Full height on left --> </div>
Real-World Examples
Fixed Header
<header class="fixed top-0 inset-x-0"> <!-- Stays at top of viewport --> </header>
Modal Overlay
<div class="fixed inset-0 bg-black/50"> <!-- Full-screen backdrop --> </div>
Floating Action Button
<button class="fixed bottom-4 right-4"> <!-- FAB in corner --> </button>
Sticky Sidebar
<aside class="sticky top-4"> <!-- Sticks when scrolling --> </aside>
Float & Clear
Float
float-leftfloat: leftfloat-rightfloat: rightfloat-startfloat: inline-startfloat-endfloat: inline-endfloat-nonefloat: noneClear
clear-leftclear: leftclear-rightclear: rightclear-bothclear: bothclear-noneclear: noneOverflow
Both Axes
overflow-autoScroll if neededoverflow-hiddenClip contentoverflow-clipClip (no scroll)overflow-visibleNo clippingoverflow-scrollAlways scrollSingle Axis
overflow-x-autoHorizontal scrolloverflow-y-autoVertical scrolloverflow-x-hiddenClip horizontaloverflow-y-hiddenClip verticalObject Fit & Position
Object Fit
object-containScale to fitobject-coverScale to fill (crop)object-fillStretch to fillobject-noneNo resizingobject-scale-downSmaller of contain/noneObject Position
object-centercenterobject-toptopobject-bottombottomobject-leftleftobject-rightrightobject-left-topleft topIsolation
isolateisolation: isolateisolation-autoisolation: autoUse isolate to create a new stacking context, preventing elements from blending with elements outside the container.
Z-Index
Control stacking order with z-* utilities:
z-0z-10z-20z-30z-40z-50z-autoFor negative z-index, use -z-10. For arbitrary values: z-[100]
Explore more Tailwind tools
Tailwind Grid Generator
Create grid layouts visually
Tailwind Flexbox Generator
Create flex layouts visually
Tailwind Gradient Generator
Create custom gradients
Tailwind Text Gradient
Gradient text effects
Tailwind Gradients Collection
275+ ready-to-use gradients
Tailwind Colors
Complete 240+ color palette
Tailwind Box Shadow Generator
Design multi-layer shadows
Tailwind Text Shadow
Add depth to text with shadows
Tailwind Filter Generator
Apply blur, brightness & more
Tailwind Transform Generator
Rotate, scale & translate elements
Tailwind Animation Generator
Create built-in & custom animations
Tailwind Transition Generator
Smooth hover transitions
Tailwind Config Generator
Generate your config file
Tailwind Input Generator
Design form inputs visually
Tailwind Class Sorter
Organize classes in order
Flexbox Cheatsheet
All flex utilities visualized
Overflow Cheatsheet
Control content overflow