CSS Position Property in Hindi – Static, Relative, Absolute, Fixed, Sticky Explained with Examples

CSS Position Property Explained – Static, Relative, Absolute, Fixed & Sticky

Socho agar aapko kisi image ko corner me chipkana hai, ya ek button ko screen ke top par fix karna hai... kaise karoge?
Answer hai 👉 CSS position property.

Ye property help karti hai kisi element ko control karne ke liye ki wo page me kahan appear kare – aur kaise behave kare scrolling ke sath.

🧭 5 Types of Position Property

Position	Description
static	Default position (normal page flow)
relative	Normal position se shift karne ke liye
absolute	Parent ke reference me exact position dena
fixed	Screen ke kisi part me fix karne ke liye (scroll par bhi wahi rahe)
sticky	Scroll karne par element chipak jata hai ek certain point tak

📍 1. position: static;

Default hoti hai sabhi elements ke liye, koi special positioning nahi hoti.

<div style="position: static;">
  This is static (default)
</div>

🧲 2. position: relative;

Element normal flow me hota hai, par aap usko shift kar sakte ho:

<div style="position: relative; top: 20px; left: 10px;">
  Relative Position
</div>

📝 Element ki original space still occupied hoti hai.

📦 3. position: absolute;

Element normal flow se nikal jaata hai, aur parent ke according place hota hai:

<div style="position: relative;">
  Parent Div
  <div style="position: absolute; top: 10px; right: 10px;">
    I am absolutely placed!
  </div>
</div>

🧠 Tip: Agar parent me position: relative; nahi di, toh absolute body ke respect me place hoga.

📌 4. position: fixed;

Element screen ke ek fixed point par chipak jaata hai:

<div style="position: fixed; top: 0; left: 0; background: yellow;">
  I’m fixed on screen!
</div>

🧠 Common Use: Sticky navbar, floating WhatsApp buttons

🧷 5. position: sticky;

Initially relative hota hai, scroll hone par fixed ban jaata hai:

<div style="position: sticky; top: 0; background: pink;">
  I’ll stick when you scroll!
</div>

🧠 Sticky tabhi kaam karta hai jab parent element ka height ho scrollable.

💻 Visual Comparison:

Position Type	Scroll Behavior	Layout Behavior
Static	Stays in flow	Default layout
Relative	Stays in flow, but shift	Uses space
Absolute	Out of flow	No space reserved
Fixed	Always on screen	No space reserved
Sticky	Scroll ke sath stick hota hai	Dynamic position

🧪 Practice Task:

• ✅ Ek parent box banao with position: relative;
• ✅ Uske andar 3 boxes banao: One absolute, One fixed, One sticky
• ✅ Dekho kaise har ek behave karta hai.

📍 Real Life Use Cases:

• fixed: Navbar, sidebar buttons
• absolute: Tooltips, modals, pop-ups
• relative: Minor adjustments
• sticky: Sticky headers in tables or pages

🏁 Conclusion

Aaj aapne seekha:

• ✅ CSS Position ke 5 types
• ✅ Har position ka use case
• ✅ Layout aur scroll ke sath behavior

Ab aap apne webpages me exact positioning control kar sakte ho like a pro! 🚀