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-పేరెంట్ / 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 మూలకాలు సాధారణ ప్రవాహం నుండి తీసివేయబడ్డాయి, కాబట్టి అవి స్థలాన్ని సংరక్షించవు — సోదరులు అవి లేనట్లుగా పనిచేస్తారు, ఇది అతివ్యాప్తిని కలిగిస్తుంది. అది ప్లాన్ చేయండి (ఉదా. స్థిర నావిగేషన్ బార్కు సరిదిద్దడానికి పాడింగ్ జోడించండి).
position అతిపురీకాలు, స్టిక్కీ హెడర్లు, మోడల్లు, డ్రాప్డౌన్లు మరియు బ్యాడ్జ్ల కోసం ముఖ్యమైనది.
Relative-పేరెంట్/absolute-చైల్డ్ సంబంధం మరియు fixed-vs-sticky వ్యత్యాసం నిరంతరం ఉపయోగించే ప్రాక్టికల్ కోర్.