position नियंत्रित करते की एक घटक कसे ठेवलेले आहे आणि offset गुणधर्म (top/right/bottom/left) लागू होत आहेत की नाही.
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute एक घटक त्याच्या सर्वात जवळच्या स्थित केलेल्या पूर्वज (static व्यतिरिक्त कोणत्याही) च्या संबंधात स्थान देते. तर तुम्ही position: relative एक मूल घटकावर सेट करता त्याला संदर्भ बिंदू बनवण्यासाठी:
.card {
position: relative; /* becomes the positioning context */
}
.badge {
position: absolute; /* positioned relative to .card */
top: 8px;
right: 8px; /* pins the badge to the card's top-right corner */
}
ही relative-parent / absolute-child पद्धत सर्वत्र आहे: badges, dropdowns, tooltips, close buttons.
.navbar { position: fixed; top: 0; } /* stays put on screen while scrolling */
.section-header { position: sticky; top: 0; } /* scrolls with content, then sticks at top */
top: 0) पर्यंत relative सारखे कार्य करते, नंतर तेथे राहते जेव्हा त्याचा कंटेनर दृश्यात आहे — विभाग शीर्षकांसाठी उत्तम.absolute/fixed घटक सामान्य प्रवाहातून काढलेले आहेत, त्यामुळे ते जागा राखत नाहीत — भाऊ-बहिणी असे कार्य करतात की ते तेथे नाहीत, जे ओव्हरलॅप कारणीभूत होऊ शकते. त्यासाठी योजना करा (उदा. एक fixed navbar ची भरपाई करण्यासाठी padding जोडा).
position overlays, sticky headers, modals, dropdowns, आणि badges साठी आवश्यक आहे.
relative-parent/absolute-child संबंध आणि fixed-vs-sticky फरक हा व्यावहारिक मूल आहे जो तुम्ही सतत वापरता.