Display & CSS Positioning (Relative, Absolute, Fixed, Sticky)

1. Simple Definition

Display property decide karti hai ki element flow me kaise behave karega (line break lega ya usi line me rahega). Aur Position property decide karti hai ki element normal page flow me rahega ya fir screen par kisi specific coordinate (top, left, right, bottom) par pin ya lock kiya jayega.

2. Real-Life Analogy

3. Why Do We Need It?

Website ke sticky headers, modal overlays, card ke upar floating "SALE" discount badges, aur floating WhatsApp chat buttons position properties se hi bante hain.

4. Syntax & Positioning Types

/* 1. Display Types */
.block       { display: block; }        /* New line, takes 100% width */
.inline      { display: inline; }       /* Same line, no width/height allowed */
.inline-block{ display: inline-block; }  /* Same line, but width/height allowed */
.hidden      { display: none; }         /* Removed from page layout */

/* 2. Position Golden Combo (Relative Parent + Absolute Child) */
.parent-card {
  position: relative; /* Reference frame ban gaya */
}
.badge-tag {
  position: absolute;
  top: 10px;
  right: 10px;        /* Parent ke top-right me lock */
}

/* 3. Sticky Navbar */
.site-header {
  position: sticky;
  top: 0;             /* Top par aate hi chipak jayega */
  z-index: 100;
}

5. Basic Example (Relative + Absolute Badge)

<div class="product-card">
  <span class="discount-badge">50% OFF</span>
  <h3>Wireless Earbuds</h3>
  <p>Price: ₹1,499</p>
</div>

<style>
  .product-card {
    position: relative;  /* Anchor for absolute child */
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 24px;
    max-width: 280px;
  }
  .discount-badge {
    position: absolute;  /* Floats at top-right */
    top: -10px;
    right: -10px;
    background: #ef4444;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 10px;
    border-radius: 999px;
  }
</style>

6. Output / Expected Result

7. Code Explanation

• position: relative: Element normal flow me rehta hai, lekin ye apne kisi bhi position: absolute child ke liye boundary/anchor ban jata hai.
• position: absolute: Normal flow se bahar nikal jata hai aur apne sabse kareebi positioned parent ke hisaab se place hota hai.
• position: fixed: Browser window (viewport) ke hisab se freeze hota hai. Page scroll karne par bhi nahi hilta.
• position: sticky: Relative aur Fixed ka hybrid — scrolling threshold (e.g. top: 0) touch hone tak normal rehta hai, fir freeze ho jata hai.

8. Real-World Example

Instagram reels ka like/comment button bar (sticky right column), Flipkart cart notification badge, aur Swiggy ka sticky category filter bar.

9. Common Mistakes

10. Best Practices

• Floating badges ke liye hamesha: Parent = relative, Child = absolute formula use karein.
• Header ko sticky banane ke liye position: sticky; top: 0; z-index: 100; use karein.

11. Try It Yourself

Playground me ek card ke top-right corner par "HOT DEAL" badge absolute position karke dekhein.

12. Challenge

Ek Floating WhatsApp Action Button banayein jo screen ke bottom-right corner me position: fixed; bottom: 20px; right: 20px; par freeze rahe.

13. Interview Questions

14. Quick Revision

• display: block/inline/inline-block/none.
• Relative Parent + Absolute Child = Floating Badge.
• position: sticky; top: 0; = Modern sticky navbars.

15. FAQ

Display & CSS Positioning (Relative, Absolute, Fixed, Sticky)

1. Simple Definition

The display property dictates an element's formatting context (e.g. block, inline, inline-block, none). CSS Positioning (relative, absolute, fixed, sticky) allows elements to be removed from normal document flow and pinned or offset precisely using top, right, bottom, and left.

2. Real-Life Analogy

3. CSS Position Types

4. The Classic Absolute Badge Pattern

<!-- Parent MUST have position: relative -->
<div class="product-card" style="position: relative;">
  <span class="sale-badge" style="position: absolute; top: 12px; right: 12px;">
    50% OFF
  </span>
  <h3>Sneakers</h3>
</div>

5. Common Mistakes

6. Best Practices

• Always establish position: relative on the containing card before positioning absolute sub-elements.
• Use position: sticky; top: 0; for persistent headers instead of JavaScript scroll listeners.
• For sticky to function, none of the ancestor parents can have overflow: hidden enabled.

7. Practice Exercise

8. Interview Questions

9. Summary / Cheat Card

• relative keeps its space and anchors absolute children.
• absolute removes element from flow, relative to closest positioned parent.
• fixed locks relative to the browser viewport.
• sticky transitions from static to fixed during scroll.

10. FAQ