📐 CSS Positioning

Control how elements are placed on your page with CSS positioning.

Static: Default, flows naturally.
Relative: Moves relative to its normal spot.
Absolute: Positioned relative to nearest positioned parent.
Fixed: Locked to viewport, stays on screen during scroll.

📝 Code Example

// Relative positioning example
.relative-box {
  position: relative;
  top: 10px;
  left: 20px;
}

/* Absolute positioning example */
.absolute-box {
  position: absolute;
  top: 50px;
  left: 100px;
}

/* Fixed positioning example */
.fixed-box {
  position: fixed;
  top: 10px;
  right: 10px;
}

Copy button not pressed yet.

💡 Pro Tip: Use relative positioning as a reference for absolute positioned children.

🎯 Interactive Demo

Relative Box

Child

Absolute Box

Child

Fixed Box (always visible)

❓ Quiz: Test Your Knowledge

1. What does position: relative; do?

Offsets element relative to its normal spot Fixes element to viewport

2. What does position: absolute; do?

Positions relative to nearest positioned ancestor Positions relative to viewport

3. What does position: fixed; do?

Fixes element to viewport and keeps it visible during scroll Moves relative to parent