Q3- Difference between absolute, relative, and fixed positioning in CSS?

The difference between absolute, relative, and fixed positioning in CSS comes down to how an element is placed on the page and what it’s positioned relative to.

---

1. Relative Positioning

• The element is positioned relative to its original position.
• If you move it using top, left, right, or bottom, it shifts but still keeps the original space in the layout.

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

📌 It moves slightly but still affects the layout around it.

---

2. Absolute Positioning

• The element is positioned relative to the nearest positioned ancestor (not the viewport).
• It’s removed from the normal flow of the page.

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

📌 It doesn’t take up space anymore — it floats freely inside its positioned parent.

---

3. Fixed Positioning

• The element is positioned relative to the viewport (the visible part of the screen).
• It stays in the same spot even if you scroll.

.box {
  position: fixed;
  top: 0;
  right: 0;
}

📌 Commonly used for sticky headers, footers, or floating buttons.

---

✅ Quick summary:

• relative → moves relative to itself.
• absolute → moves relative to parent container (if positioned).
• fixed → moves relative to the browser window (stays in place while scrolling).