Basics
Positioning
static, relative, absolute, fixed
💡 Position property decide karti hai element "normal flow" follow karega ya khud se position hoga — static ek normal queue mein khada hona hai, relative apni jagah se thoda shift hona (lekin space reserve rehti hai), absolute queue se bahar nikal kar kahi bhi khada ho jaana, fixed screen par chipak jaana (scroll se bhi na hilना).
static (default) — normal document flow, top/left/right/bottom ka koi effect nahi. relative — normal flow mein rehta hai, LEKIN top/left se khud ko shift kar sakta hai (original jagah "reserved" rehti hai, ghost jaisi). absolute — normal flow se COMPLETELY nikal jaata hai, nearest "positioned" (non-static) ancestor ke relative position hota hai. fixed — viewport ke relative, scroll karne par bhi apni jagah rehta hai.
.relative-box {
position: relative;
top: 10px; /* apni normal position se 10px neeche shift */
left: 20px;
}
.absolute-box {
position: absolute;
top: 0;
right: 0; /* nearest positioned parent ke top-right corner mein */
}
.fixed-navbar {
position: fixed;
top: 0;
width: 100%; /* scroll karne par bhi top par chipka rahega */
}📍
Position property decide karti hai element "normal flow" follow karega ya khud se position hoga — static ek normal queue mein khada hona hai, relative apni jagah se thoda shift hona (lekin space reserve rehti hai), absolute queue se bahar nikal kar kahi bhi khada ho jaana, fixed screen par chipak jaana (scroll se bhi na hilना).
1 / 2
⚡ झट से Recap
- static = normal flow (default), relative = shift karo, jagah reserved
- absolute = flow se bahar, nearest positioned ancestor ke relative
- fixed = viewport ke relative, scroll-independent
इस page में (1 subtopics)
Jab positioned elements (relative/absolute/fixed) overlap karte hain, z-index decide karta hai kaunsa UPAR dikhega — bada number upar. z-index sirf positioned elements par kaam karta hai (static par nahi).
.modal {
position: fixed;
z-index: 1000; /* bahut upar, saari cheezon ke upar dikhega */
}
.tooltip {
position: absolute;
z-index: 100;
}Tip: Bade projects mein z-index values ko systematically organize karna helpful hai (jaise dropdown: 10, modal: 100, toast: 1000) — random high numbers (z-index: 99999) "z-index wars" ki taraf le jaate hain.