CSS Positioning
static, relative, absolute, fixed, sticky
CSS position property elements page वर नक्की कुठे ठेवायचे ते control करते. Fixed headers, sticky navbars, tooltips, modals — सगळ्यांसाठी positioning लागते.
1. position: static — Default
सगळे elements default मध्ये static असतात. Normal document flow follow करतात. top, left, right, bottom properties इथे काम करत नाहीत.
2. position: relative
position: relative
.box {
position: relative;
top: 20px; /* Original position पासून 20px खाली */
left: 30px; /* Original position पासून 30px उजवीकडे */
/* Original space कायम राहतो — gap fill होत नाही */
}3. position: absolute
Element normal flow मधून बाहेर येतो. Nearest positioned ancestor (relative/absolute/fixed) relative ठेवला जातो. तो नसेल तर viewport relative.
position: absolute — उदाहरण
.container {
position: relative; /* Anchor point */
width: 300px;
height: 200px;
background: #1e293b;
}
.badge {
position: absolute;
top: 10px;
right: 10px; /* Container च्या top-right corner मध्ये */
background: orange;
padding: 4px 8px;
border-radius: 4px;
}4. position: fixed
position: fixed — Sticky Navbar
/* Viewport relative — scroll केल्यावर पण दिसतो */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
background: #0a0c12;
z-index: 100; /* बाकी सगळ्यांवर */
}
/* Use: Fixed navbar, floating buttons, cookie banners */5. position: sticky
position: sticky
.section-header {
position: sticky;
top: 0; /* Scroll करताना इथे "stick" होतो */
background: #1e293b;
padding: 10px;
}
/* Normal flow मध्ये असतो — scroll करताना fixed होतो
Parent element संपल्यावर परत सोडतो */Marathi Analogy
📌 Analogy: static = कुठेतरी बसलेले. relative = थोडे हलवले पण जागा marked आहे. absolute = उचलले आणि container च्या कोपऱ्यात ठेवले. fixed = screen वर चिकटवले — scroll केलेस तरी येत नाही. sticky = table च्या वर scroll करेपर्यंत normal, नंतर चिकटतो.
✅ Key Points — लक्षात ठेवा
- ▸static: default, normal flow, top/left काम करत नाही
- ▸relative: original position पासून shift, space कायम
- ▸absolute: nearest positioned parent relative, flow मधून बाहेर
- ▸fixed: viewport relative, scroll केल्यावर पण दिसतो
- ▸sticky: scroll threshold पर्यंत relative, नंतर fixed