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-பெற்றோர் / absolute-பிள்ளை முறை எல்லাவற்றிலும் உள்ளது: பேட்ஜ்கள், ட்ரপ்-டவுன்கள், கருவிமுனைகள், மூடல் பொத்தான்கள்.
.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) வரை தொடர்பாக செயல்படுகிறது, பிறகு அதன் கன்டெய்னர் பார்வையில் இருக்கும் போது அங்கேயே இருக்கிறது — பிரிவு தலைப்புகளுக்கு சிறந்தது.absolute/fixed உறுப்புகள் சாধாரண ப্রবাহ থেকে அகற்றப்பட்ட ஆகையால் அவை இடத்தைக் கட்டுப்படுத்துவதில்லை — சகோதரங்கள் அவர்கள் இல்லை என்ற மாதிரி செயல்படுகிறார்கள், இது மேலெழுதலை ஏற்படுத்தலாம். அதற்கு திட்டம் செய்யுங்கள் (உ.தா. ஒரு நிரந்தர நெவிகேஷன் பட்டையை ஈடுசெய்ய padding ஐ சேர்க்கவும்).
position overlays, sticky தலைப்புகள், modals, ட்রபன்களை மற்றும் பேட்ஜ்களுக்கு அவசியம்.
Relative-பெற்றோர்/absolute-பிள்ளை உறவு மற்றும் fixed-vs-sticky வேறுபாட்டு நடைமுறை மூலம் நீங்கள் நிরந்தரமாக பயன்படுத்தும் முக்கியமான அடித்தளம்.