CSS Position Property Kya Hoti hai?

Elements ko Precisely Place Karne ke Tarike

Introduction to CSS Positioning

CSS ki position property web design ka ek fundamental concept hai. Yeh decide karti hai ki ek HTML element document flow me kaise place hoga. Is property ke saath top, right, bottom, left, aur z-index properties ka use karke hum elements ko precisely control kar sakte hain.

Position Property Values

1. position: static;

Yeh har element ki default value hai. Static positioned elements normal document flow ke hisaab se render hote hain. In par top, right, bottom, left, aur z-index properties ka koi asar nahi hota.

.box { position: static; /* Default behavior */ }

2. position: relative;

Yeh element ko uski normal position ke relative place karta hai. Is par top, right, bottom, left properties apply karke aap use uski original jagah se move kar sakte hain, lekin uski original space layout me khali rehti hai. Yeh absolute positioned child elements ke liye containing block ka kaam karta hai.

.box { 
    position: relative; 
    top: 20px; /* Moves 20px down from its normal position */
    left: 30px; /* Moves 30px right from its normal position */
}

3. position: absolute;

Absolute positioned element ko normal document flow se bahar nikal diya jaata hai. Yeh apne sabse nazdeeki "positioned" ancestor (jiska position static na ho, jaise relative, absolute, ya fixed) ke hisaab se place hota hai. Agar koi positioned ancestor nahi milta, toh yeh document body (<body>) ke hisaab se position leta hai.

.parent-container {
    position: relative; /* Containing block for the child */
}
.child-box {
    position: absolute;
    top: 0;
    right: 0;
}

4. position: fixed;

Fixed positioning element ko viewport (browser window) ke relative position karta hai. Page scroll karne par bhi yeh element apni jagah par "fixed" rehta hai. Iska use aamtaur par navigation bars, footers, ya "back-to-top" buttons ke liye hota hai.

.header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
}

5. position: sticky;

Yeh relative aur fixed ka ek hybrid hai. Element normal document flow me rehta hai (relative ki tarah) jab tak woh scroll karke ek specific threshold (e.g., top: 0) tak nahi pahunch jaata. Uske baad, woh "stick" ho jaata hai aur fixed ki tarah behave karta hai.

.sidebar-title {
    position: sticky;
    top: 10px;
    background-color: #eee;
}

The z-index Property

Jab elements overlap karte hain, tab z-index property decide karti hai ki kaunsa element upar aayega (stacking order). Is property ko kaam karne ke liye element ka position static ke alawa kuch aur hona chahiye.

Jiska z-index value zyada hota hai, woh element upar dikhta hai.

.blue-box { z-index: 2; /* Upar aayega */ }
.red-box { z-index: 1; /* Neeche rahega */ }

Positioning Summary

Position ValueBehavior
staticDefault. Normal document flow ko follow karta hai.
relativeNormal position se shift hota hai, lekin apni original space ko hold karta hai.
absoluteApne nearest positioned ancestor ke relative place hota hai. Document flow se bahar ho jaata hai.
fixedViewport ke relative place hota hai. Scroll karne par bhi apni jagah par fix rehta hai.
stickyNormal flow me rehta hai jab tak scroll karke ek specific point tak na pahunch jaaye, fir fixed ho jaata hai.

Key Takeaways

  • position: static; default value hai aur is par top/left kaam nahi karte.
  • position: relative; element ko uski original position se move karta hai aur child elements ke liye reference point banata hai.
  • position: absolute; element ko normal flow se bahar nikal deta hai aur use positioned parent ke hisaab se place karta hai.
  • position: fixed; element ko screen par fix kar deta hai.
  • position: sticky; scroll karne par fixed ho jaata hai.
  • z-index property positioned elements ka stacking order control karti hai.
Bonus: Practical Application!
Apne webpage par aaj hi CSS position property ka use karke dekhein!

Ek parent `div` ko `position: relative` aur uske andar ek child `div` ko `position: absolute` dekar dekhein ki woh kaise behave karta hai.

Practice in CSS Editor
Test Your Knowledge!
Kya aap CSS Position Property ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz