Position Types
- Learn different CSS position types and when to use them in layouts.
Understanding Position Types
Every HTML element has a position type that defines:
Whether it follows normal document flow
Whether it can be moved using offsets (top, left, etc.)
What it is positioned relative to
In Tailwind CSS, position types map directly to CSS behavior—no abstraction, no magic.
Static Position (Default Behavior)
What is static ?
static is the default position type for all elements.
Characteristics:
Element follows normal document flow
Cannot be moved using top, left, right, bottom
Ignores inset utilities
<div class="static">
Static element
</div>
Static Position Default
Uses the default static positioning that ignores offset utilities.
<div class="static top-0 left-0">
</div>When is static Used ?
Normal content
Paragraphs
Headings
Layout elements controlled by flex/grid
Relative Position
What is relative ?
relative keeps the element in normal flow, but allows:
Movement using offsets
Child elements to position relative to it
<div class="relative">
Relative container
</div>
Key Characteristics
Does not remove element from layout
Creates a positioning context for absolute children
Slight offsets move the element visually but keep its space
<div class="relative top-2 left-2">
Slightly shifted element
</div>
The space it originally occupied remains.
Most Common Use Case
relative is most often used not to move itself,
but to act as a reference for absolute children.
Relative Container
Uses relative to create a positioning context for absolute elements.
<div class="relative">
Relative container
</div>
<!-- Relative parent with absolute child -->
<div class="relative">
<span class="absolute top-0 right-0">Badge</span>
</div>Absolute Position (Floating Elements)
What is absolute ?
absolute removes the element from normal flow and positions it:
Relative to the nearest positioned ancestor (relative, absolute, fixed, sticky)
Or the viewport if no such ancestor exists
<div class="absolute top-0 right-0">
Floating element
</div>
Key Characteristics
Element no longer takes up space
Other elements ignore it
Requires offsets to be visible in intended position
Absolute Floating Element
Uses absolute to position an element relative to its nearest positioned parent.
<div class="absolute top-0 right-0">
Floating element
</div>
<!-- Correct pattern with relative parent -->
<div class="relative w-64 h-40 bg-gray-100">
<span class="absolute bottom-2 right-2">
Badge
</span>
</div>Without relative on the parent, the badge would attach to the viewport instead.
Common Use Cases
Badges
Icons inside inputs
Tooltips
Dropdown menus
Close buttons
Overlays inside components
Fixed Position (Viewport Lock)
What is fixed ?
fixed positions an element relative to the viewport, not the document.
Fixed Floating Button
Positions an element fixed to the viewport.
<div class="fixed bottom-4 right-4">
Floating button
</div>Key Characteristics
Always stays in the same place on screen
Does not scroll with content
Removed from document flow
Common Use Cases
Floating action buttons
Chat widgets
Cookie banners
Back-to-top buttons
Persistent navigation elements
Important Caution
Overusing fixed can:
Block content
Break mobile layouts
Cause accessibility issues
Sticky Position (Scroll-Aware)
What is sticky ?
sticky is a hybrid between relative and fixed.
Sticky Header
Keeps the element fixed at the top during scroll.
<div class="sticky top-0">
Sticky header
</div>How Sticky Works
Behaves like relative initially
Becomes fixed once a scroll threshold is reached
Requires at least one offset (top, bottom)
Sticky Only Works When
Parent container has enough height
No overflow: hidden blocks it
Offset value is defined
Without top-0, sticky does nothing.
Common Use Cases
Sticky headers
Section titles
Sidebar navigation
Table headers
Position Types Comparison
Position In Flow Moves with Scroll Relative To static Yes Yes Normal flow relative Yes Yes Itself absolute No Yes Nearest positioned parent fixed No No Viewport sticky Yes →No Conditional Scroll container Offsets & Insets (Required for Positioning)
Offsets include:
top-0
bottom-0
left-0
right-0
inset-0
Inset Overlay
Uses inset-0 to stretch an absolute element to all sides.
<div class="absolute inset-0">
Full overlay
</div>No offset = no movement.
Positioning is NOT Layout
Never use:
absolute to align normal content
fixed to replace grid/flex
relative to fix spacing issues
Correct mental model:
Layout → Flexbox / Grid
Positioning → Overlays, floating UI, special cases
Common Mistakes
Forgetting relative on parent
Expecting static to move
Using absolute for entire layouts
Overusing fixed
Using sticky without offsets
If layout breaks on resize → positioning is misused.
Default to static
Use relative as an anchor
Use absolute for floating UI
Use fixed for viewport tools
Use sticky for scroll-aware elements
Always define offsets
Combine positioning with z-index carefully