Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
position property determines how an element is positioned in the document. You can make elements stay in place, move relative to their normal position, float over content, or stick to the viewport.Normal document flow. Elements stack naturally. Cannot use top/right/bottom/left.
position: static; /* Default */💡 This is how elements naturally behave without any positioning
Positioned relative to its normal position. Original space is preserved. Can use top/right/bottom/left to offset.
position: relative;
top: 20px;
left: 30px;✅ Use case: Small adjustments, creating positioning context for children
Removed from normal flow. Positioned relative to nearest positioned ancestor (or body). No space reserved.
position: absolute;
top: 10px;
right: 10px;✅ Use case: Tooltips, badges, overlays, dropdowns
Positioned relative to the viewport. Stays in place when scrolling. Removed from normal flow.
position: fixed;
bottom: 20px;
right: 20px;Imagine scrolling the page...
✅ Use case: Navigation bars, chat widgets, back-to-top buttons
Hybrid of relative and fixed. Scrolls normally until threshold, then sticks in place.
position: sticky;
top: 0; /* Sticks when reaching top */✅ Use case: Sticky headers, table headers, sidebar navigation
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="container">
<h1>📍 Positioning Demo</h1>
<div class="demo-box relative-demo">
<div class="label">position: relative</div>
<div class="box" style="background: #e5e7eb; color: #333;">Normal</div>
<div class="box relative-box">Relative<br>(+20px, +30px)</div>
<div class="note">
Notice: Relative box is offset but original space is preserved
</div>
</div>
<div class="demo-box absolute-demo">
<div class="label">position: absolute</div>
<div class="absolute-box">Absolute<br>top: 50px<br>right: 20px</div>
<div class="note">
Notice: Absolute box is positioned relative to this parent container
</div>
</div>
<div class="demo-box">
<div class="label" style="background: #f59e0b; color: white;">position: sticky (Scroll to see!)</div>
<div class="scroll-content">
<div class="sticky-header">
Sticky Header - Scroll inside this box!
</div>
<p style="margin-bottom: 15px;">Keep scrolling...</p>
<p style="margin-bottom: 15px;">The header will stick to the top</p>
<p style="margin-bottom: 15px;">Keep going...</p>
<p style="margin-bottom: 15px;">Notice how it sticks!</p>
<p style="margin-bottom: 15px;">This is position: sticky</p>
<p style="margin-bottom: 15px;">Very useful for headers</p>
<p style="margin-bottom: 15px;">And navigation menus</p>
<p>Bottom of scrollable content</p>
</div>
</div>
<p style="text-align: center; color: #6b7280; font-size: 14px; margin-top: 30px;">
Scroll down to see more... 👇
</p>
<div style="height: 400px; display: flex; align-items: center; justify-content: center; color: #6b7280;">
<p>Keep scrolling to see the fixed box...</p>
</div>
</div>
<div class="fixed-box">
Fixed Box<br>
<small style="font-size: 10px;">Always visible!</small>
</div>
</body>
</html>Loading preview...
Once you set position to anything except static, you can use these properties:
topDistance from top edge
top: 20px;rightDistance from right edge
right: 10px;bottomDistance from bottom edge
bottom: 0;leftDistance from left edge
left: 50%;position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);