Definition
The position CSS property sets how an element is positioned in the document. It establishes the positioning context for the element and determines how it interacts with other elements in the layout flow. The position property works in conjunction with the top, right, bottom, and left properties to precisely control element placement.
Syntax
position: <position-value>;
Values
Static (Default)
Elements with position: static are positioned according to the normal document flow. The top, right, bottom, and left properties have no effect.
.static-element {
position: static;
/* top, right, bottom, left properties won't work */
}
Relative
Elements with position: relative are positioned relative to their normal position in the document flow. The element can be moved using top, right, bottom, and left properties.
.relative-element {
position: relative;
top: 20px;
left: 30px;
}
Absolute
Elements with position: absolute are positioned relative to their nearest positioned ancestor (an ancestor with position other than static). If no positioned ancestor exists, they’re positioned relative to the initial containing block.
.absolute-element {
position: absolute;
top: 0;
right: 0;
width: 100px;
height: 100px;
}
Fixed
Elements with position: fixed are positioned relative to the viewport. They remain in the same position even when the page is scrolled.
.fixed-element {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
}
Sticky
Elements with position: sticky behave like relative until they reach a specified threshold, then behave like fixed. This is useful for creating sticky navigation or headers.
.sticky-element {
position: sticky;
top: 0;
z-index: 100;
}
Examples
Relative Positioning
Relative Positioning:
This is the normal position
<div class="bg-gray-100 p-6 border">
<h3 class="font-semibold mb-4">Relative Positioning:</h3>
<div class="relative bg-blue-200 p-4 border-2 border-blue-500">
<p class="mb-2">This is the normal position</p>
<div class="relative bg-red-300 p-3 border border-red-600 -top-2 -right-2">
This element is positioned relative to its normal position
</div>
</div>
</div>Absolute Positioning
Absolute Positioning:
Parent container with relative positioning
<div class="bg-gray-100 p-6 border">
<h3 class="font-semibold mb-4">Absolute Positioning:</h3>
<div class="relative bg-green-200 p-8 border-2 border-green-500">
<p class="mb-4">Parent container with relative positioning</p>
<div class="absolute bg-yellow-300 p-3 border border-yellow-600 top-2 right-2">
Absolutely positioned in top-right corner
</div>
<div class="absolute bg-purple-300 p-3 border border-purple-600 bottom-2 left-2">
Absolutely positioned in bottom-left corner
</div>
</div>
</div>Fixed Positioning
Fixed Positioning (simulated):
Scrollable container (simulating viewport)
Content line 1
Content line 2
Content line 3
Content line 4
Content line 5
<div class="bg-gray-100 p-6 border">
<h3 class="font-semibold mb-4">Fixed Positioning (simulated):</h3>
<div class="relative bg-orange-200 p-8 border-2 border-orange-500 overflow-hidden">
<p class="mb-4">Scrollable container (simulating viewport)</p>
<div class="absolute bg-red-400 text-white p-2 rounded top-2 right-2 z-10">
Fixed-like element (stays in position)
</div>
<div class="space-y-2">
<p>Content line 1</p>
<p>Content line 2</p>
<p>Content line 3</p>
<p>Content line 4</p>
<p>Content line 5</p>
</div>
</div>
</div>Sticky Positioning
Sticky Positioning:
Scrollable content 1
Scrollable content 2
Scrollable content 3
Scrollable content 4
Scrollable content 5
Scrollable content 6
Scrollable content 7
Scrollable content 8
<div class="bg-gray-100 p-6 border">
<h3 class="font-semibold mb-4">Sticky Positioning:</h3>
<div class="bg-white border rounded overflow-hidden">
<div class="sticky top-0 bg-blue-500 text-white p-3 font-semibold z-10">
Sticky Header (sticks to top when scrolling)
</div>
<div class="p-4 space-y-2">
<p>Scrollable content 1</p>
<p>Scrollable content 2</p>
<p>Scrollable content 3</p>
<p>Scrollable content 4</p>
<p>Scrollable content 5</p>
<p>Scrollable content 6</p>
<p>Scrollable content 7</p>
<p>Scrollable content 8</p>
</div>
</div>
</div>Z-Index Layering
Z-Index Layering:
<div class="bg-gray-100 p-6 border">
<h3 class="font-semibold mb-4">Z-Index Layering:</h3>
<div class="relative bg-gray-300 p-8 border-2 border-gray-500">
<div class="absolute bg-blue-400 p-4 rounded top-4 left-4 z-10">
Layer 1 (z-index: 10)
</div>
<div class="absolute bg-green-400 p-4 rounded top-8 left-8 z-20">
Layer 2 (z-index: 20)
</div>
<div class="absolute bg-red-400 p-4 rounded top-12 left-12 z-30">
Layer 3 (z-index: 30)
</div>
</div>
</div>Browser Support
The position property has excellent browser support:
-
static: Full support in all browsers -
relative: Full support in all browsers -
absolute: Full support in all browsers -
fixed: Full support in all browsers -
sticky: Full support in all browsers (IE11+)
Best Practices
- Positioning context: Always ensure proper positioning context when using
absolutepositioning - Z-index management: Use z-index sparingly and maintain a logical hierarchy
- Responsive design: Consider how positioning affects layout on different screen sizes
- Accessibility: Ensure positioned elements don’t interfere with screen readers or keyboard navigation
Common Use Cases
-
relative: For creating positioning context or making minor adjustments -
absolute: For tooltips, dropdowns, and overlays -
fixed: For navigation bars, chat widgets, and modal overlays -
sticky: For sticky headers, navigation, and table headers -
static: For normal document flow (default behavior)
Related Properties
-
top,right,bottom,left: Control positioning offsets -
z-index: Control stacking order of positioned elements -
float: Alternative positioning method (though positioning is often preferred) -
transform: Can be used with positioning for advanced layouts