Default for all elements. Elements flow normally in
the page. Top, right, bottom, left, and z-index have
NO effect.
Static Box 1
Static Box 2
Static Box 3
/* Static positioning - default behavior */ .element { position:
static; /* This is default, you rarely write this */ top: 20px; /* ❌
Does NOTHING */ left: 30px; /* ❌ Does NOTHING */ } /* Elements just
stack vertically in normal flow */
2. position: relative
Relative to its normal position. The element stays in
the document flow, but you can move it using top, right, bottom, left.
Other elements are NOT affected
(they act like it never moved).
Normal Box (not moved)
Relative Box top:20px, left:30px
Another Normal Box (acts like relative box didn't move)
/* Relative positioning - moves relative to original position */
.relative-box { position: relative; top: 20px; /* Moves DOWN from
original position */ left: 30px; /* Moves RIGHT from original position
*/ /* Other elements ignore this movement - they stay where original
box was */ }
3. position: absolute
Removed from document flow. Other elements act like
it doesn't exist. Positioned relative to the
nearest positioned ancestor (parent with
relative/absolute/fixed/sticky). If no positioned ancestor, positions
relative to <body>.
Normal Box (in flow)
Absolute Box top:20px, right:20px
Absolute Box 2 bottom:20px, left:20px
Another Normal Box Notice the absolute boxes don't take up
space
/* Absolute positioning - relative to nearest positioned parent */
.parent { position: relative; /* This makes parent the reference point
*/ } .absolute-child { position: absolute; top: 20px; /* 20px from top
of parent */ right: 20px; /* 20px from right of parent */ /* Removed
from document flow - other elements ignore it */ }
4. position: fixed
Fixed to the viewport. Stays in the same place even
when scrolling. Removed from document flow. Great for navigation bars,
back-to-top buttons, chat widgets.
Example: The red navigation bar at the top of this
page uses position: fixed. Scroll down — it stays
visible!
/* Fixed positioning - relative to viewport */ .fixed-nav { position:
fixed; top: 0; left: 0; width: 100%; /* Always visible, even when
scrolling */ }
5. position: sticky
Hybrid of relative and fixed. Behaves like relative
until you scroll past it, then it "sticks" to the top. Great for table
headers, section titles, and category headers.
Try scrolling inside the box below:
📌 Sticky Header - Try scrolling here!
Section 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Section 2: Sed do eiusmod tempor incididunt ut labore et dolore.
Section 3: Ut enim ad minim veniam, quis nostrud exercitation.
Section 4: Duis aute irure dolor in reprehenderit.
Section 5: Excepteur sint occaecat cupidatat non proident.
Section 6: The sticky header stays at the top while scrolling!
/* Sticky positioning - sticks when scrolled past */ .sticky-header {
position: sticky; top: 0; /* Sticks to top when scrolled to this point
*/ /* Works inside a scrolling container */ }
📊 Comparison: When to Use Each
Position
Reference Point
Removed from Flow?
Scrolling Behavior
Common Use
static
Normal flow
❌ No
Scrolls normally
Default (rarely set manually)
relative
Original position
❌ No
Scrolls normally
Fine-tuning position, absolute child reference
absolute
Nearest positioned ancestor
✅ Yes
Scrolls with page
Modals, tooltips, overlays, badges
fixed
Viewport (browser window)
✅ Yes
Stays fixed on scroll
Navigation bars, back-to-top, chat widgets
sticky
Scrolling container
❌ No (until threshold)
Sticks then scrolls
Section headers, table headers, category headers
📚 Quick Reference Card
/* Remember these 5 values */
/* 1. STATIC - default, nothing special */
position: static;
/* 2. RELATIVE - move from normal spot */
position: relative;
top: 20px; left: 30px;
/* 3. ABSOLUTE - relative to parent with position */
position: absolute;
top: 0; right: 0;
/* 💡 PRO TIP: When using absolute, parent needs position: relative
*/
.parent { position: relative; }
.child { position: absolute; top: 0; left: 0; }
🧠 Quick Quiz
/* Question 1: Which position value makes an element stick to the top
while scrolling? */ /* Answer: position: sticky; */ /* Question 2: For
absolute positioning, what must the parent have? */ /* Answer:
position: relative (or absolute/fixed/sticky) */ /* Question 3: Which
position is used for a fixed navigation bar? */ /* Answer: position:
fixed; */ /* Question 4: What is the default position of all HTML
elements? */ /* Answer: position: static; */ /* Question 5: Which
position removes the element from document flow? */ /* Answer:
absolute and fixed (and sticky at threshold) */