CSS Position Properties Guide

1. position: static (Default)

What it does: Normal document flow. Elements appear in the order they're written.
Key point: top, right, bottom, left properties have NO effect!

position: static; /* Default behavior */

Normal Box 1

Static Box (positioned)

Normal Box 2

All boxes flow normally, ignoring any top/left values.

2. position: relative

What it does: Moves element relative to its normal position.
Key point: Original space is preserved! Other elements don't move.

position: relative;
top: 20px;
left: 30px;

Normal Box 1

Relative Box

Normal Box 2

Notice the dashed outline shows original position!

3. position: absolute

What it does: Removes element from normal flow. Positions relative to nearest positioned parent.
Key point: If no positioned parent exists, it uses the document body.

position: absolute;
top: 50px;
right: 20px;

Normal Box 1

Absolute Box

Normal Box 2

Absolute box is positioned relative to this demo container!

4. position: fixed

What it does: Fixes element to the viewport (browser window).
Key point: Stays in same position even when scrolling!

position: fixed;
top: 10px;
right: 10px;

Normal Box 1

Normal Box 2

Click button to see fixed positioning in action!

5. position: sticky

What it does: Switches between relative and fixed based on scroll position.
Key point: Sticks to top when scrolling, but only within its container!

position: sticky;
top: 0;

Normal Box 1

Sticky Box - Scroll Me!

Scroll this area ↕️

Keep scrolling to see the sticky behavior...

The sticky box will stick to the top when you scroll!

But it only sticks within this scrollable container.

Z-Index (Stacking Order)

What it does: Controls which element appears on top when they overlap.
Key point: Higher z-index = appears on top. Only works with positioned elements!

z-index: 1; /* Lower */
z-index: 2; /* Middle */
z-index: 3; /* Higher = on top */

z-index: 1

z-index: 2

z-index: 3

📊 Quick Comparison

Position	Document Flow	Positioned Relative To	Common Use Cases
static	Normal flow	-	Default behavior
relative	Keeps space	Its normal position	Small adjustments, parent for absolute
absolute	Removed from flow	Nearest positioned parent	Overlays, tooltips, dropdowns
fixed	Removed from flow	Viewport (browser window)	Headers, modals, floating buttons
sticky	Conditional	Scrolling container	Sticky headers, navigation

💡 Pro Tips

1. Parent-Child Relationship: Absolute elements position relative to their nearest positioned parent (not static).

2. Z-Index Only Works: On positioned elements (relative, absolute, fixed, sticky).

3. Fixed vs Sticky: Fixed stays put always, sticky only when scrolling.

4. Performance: Fixed and absolute elements don't affect other elements' layout.

CSS Position Properties - Complete Guide

1. position: static (Default)

2. position: relative

3. position: absolute

4. position: fixed

5. position: sticky

Scroll this area ↕️

Z-Index (Stacking Order)

🎮 Interactive Position Demo

📊 Quick Comparison

💡 Pro Tips

CSS Position Properties - Complete Guide

1. position: static (Default)

2. position: relative

3. position: absolute

4. position: fixed

5. position: sticky

Scroll this area ↕️

Z-Index (Stacking Order)

🎮 Interactive Position Demo

📊 Quick Comparison

💡 Pro Tips

Fixed Position Demo!