position कसरी एक तत्व राखिएको छ र क्या offset properties (top/right/bottom/left) लागू हुन्छन् भनेर नियन्त्रण गर्दछ।
css
{ : static; }
{ : relative; }
{ : absolute; }
{ : fixed; }
{ : sticky; }
absolute एक तत्वलाई यसको निकटतम ancestor जो positioned छ (anything other than static) को सापेक्षमा राखदछ। त्यसैले तपाइले एक parent मा position: relative सेट गर्नुहुन्छ यसलाई reference point बनाउन:
.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 pattern सर्वत्र छ: 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 रूपमा काम गर्दछ, त्यसपछि यसको container दृश्यमा हुँदा त्यहाँ रहन्छ — section headers को लागि राम्रो।absolute/fixed elements normal flow बाहिर हटाइएका हुन्छन्, त्यसैले तिनीहरूले स्थान सुरक्षित गर्दैनन् — siblings ले गरेन जस्तै काम गर्दछन्, जसले overlap गर्न सक्छ। त्यसको लागि योजना गर्नुहोस् (जस्तै fixed navbar को लागि padding थप्नुहोस्)।
position overlays, sticky headers, modals, dropdowns, र badges को लागि आवश्यक छ।
relative-parent/absolute-child relationship र fixed-vs-sticky distinction व्यावहारिक कोर हुन् जसलाई तपाइ सधैं प्रयोग गर्नुहुन्छ।