Types of Position

1. position: static (DEFAULT)

Behavior:

• Default for all elements
• Follows normal document flow
• top, left, etc DO NOT WORK

.box {
  position: static;
}

👉 You rarely use this manually

2. position: relative

Behavior:

• Moves relative to its original position
• Still occupies original space

.box {
  position: relative;
  top: 20px;
  left: 30px;
}

👉 Moves down 20px, right 30px

IMPORTANT:

• Leaves a gap where it originally was

3. position: absolute

Behavior:

• Removed from normal flow
• Positioned relative to nearest positioned parent

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

👉 Child sticks to top-right of parent

⚠️ KEY RULE:

👉 If no parent has position → uses body

4. POSITION FIXED

The element stays fixed on the screen even while scrolling.

Used for:

• navbar
• floating buttons
• chat icons
• CTA buttons

5. POSITION STICKY

Element behaves:

• normal initially
• sticks after scroll reaches a point

Best for:

• sticky navbar
• section titles
• sidebars