Static is the default position.
Relative moves from its original position.
Absolute positions an element according to its parent.
Absolute element ka parent relative, fixed, sticky ho sakta hai. Is situation mein absolute child apne positioned parent ke according position hota hai.
Relative parent ke andar absolute
NEWParent: relative
Child: absolute
Sticky parent ke andar absolute
NEWParent: sticky
Child: absolute
Fixed parent ke andar absolute
NEWParent: fixed
Child: absolute
What is Sticky?
Sticky element normal position par rehta hai, lekin scroll karne par specified position par stick ho jata hai.
Scroll down...
Ab page ko dheere dheere scroll karein aur dekhein ke orange navbar kis tarah top par rukta hai.
Sticky navigation websites mein bohat useful hoti hai. User scroll karta rahe, lekin important menu screen par visible rehta hai.
CSS mein position: sticky tab kaam karta hai jab element ko top ya bottom ki value di jaye.
Scroll karte waqt orange navbar ko observe karein. Yeh apni position se move hoga aur phir page ke top par stick ho jayega.
Sticky element apne parent container ke andar hi rehta hai. Parent section ke end par pohanchne ke baad yeh bhi scroll ho jata hai.
Sticky headers blogs, documentation pages aur shopping websites mein aksar use kiye jate hain.
Practice ke liye top: 0 ko kisi aur value se replace karke dekhein aur page ka behavior compare karein.
Web pages par sticky menu user ko different sections ke darmiyan jaldi move karne mein help karta hai.
Sticky sidebar articles, dashboards aur online courses mein useful hota hai, kyunki important links hamesha accessible rehte hain.
Agar sticky element kisi doosre element ke peeche chala jaye, to usay upar dikhane ke liye z-index property use ki ja sakti hai.
Sticky aur fixed mein farq yeh hai ke sticky apne parent ke andar limited rehta hai, jabke fixed element viewport ke saath attached rehta hai.
Fixed element viewport ke saath attached rehta hai.
Scroll karte waqt yeh apni position par rehta hai.