CSS స్థానాలు దీర్ఘంగా వెబ్సైట్ లేఅవుట్లను రూపొందించడంలో ముఖ్యమైన భాగంగా ఉన్నాయి. అటువంటి Flexbox మరియు CSS గ్రిడ్ వంటి CSS లేఅవుట్ పద్ధతులు పెరుగుదల తో, స్థానాలు ఇప్పటికీ వ్యూహాలను ఏ వెబ్ డిజైనర్ యొక్క సంచిలో ఒక ముఖ్యమైన స్థానం ఉంది.
CSS స్థానమును వుపయోగిస్తున్నప్పుడు, మీరు చేయవలసిన మొదటి విషయం ఏమిటంటే, మీరు ఇచ్చిన అంశానికి సంపూర్ణ లేదా సాపేక్ష స్థానమును ఉపయోగించబోతున్నారా అనేదానిని బ్రౌసర్కు చెప్పటానికి స్థానం కోసం CSS ఆస్తి స్థాపించబడింది. మీరు ఈ రెండు స్థాన లక్షణాల మధ్య తేడాను కూడా అర్థం చేసుకోవాలి.
సంపూర్ణ మరియు సాపేక్షమైనవి రెండు CSS స్థానం లక్షణాలను ఎక్కువగా వెబ్ డిజైన్లో ఉపయోగించినప్పటికీ, వాస్తవానికి స్థాన లక్షణానికి నాలుగు రాష్ట్రాలు ఉన్నాయి:
- స్టాటిక్
- సంపూర్ణ
- సంబంధిత
- స్థిర
స్టాటిక్ పొజిషనింగ్
వెబ్పేజీలో ఎలిమెంట్కు డిఫాల్ట్ స్థానం స్టాటిక్. మీరు ఒక మూలకం యొక్క స్థానాన్ని నిర్వచించకపోతే, ఇది స్టాటిక్ అవుతుంది, ఇది HTML పత్రంలో ఎక్కడ ఉందో మరియు ఆ పత్రం యొక్క సాధారణ ప్రవాహంలో ఇది ఎలా ప్రదర్శిస్తుందో ఆధారంగా తెరపై ప్రదర్శిస్తుంది.
మీరు స్థాన నియమాలు వర్తిస్తే టాప్ లేదా వదిలి స్థిరమైన స్థితిని కలిగి ఉన్న మూలకానికి, ఆ నియమాలు విస్మరించబడతాయి మరియు సాధారణ డాక్యుమెంట్ ప్రవాహంలో కనిపించే మూలకం మిగిలి ఉంటుంది. ఎప్పుడైనా మీరు అరుదుగా ఉంటే, CSS లో స్థిరమైన స్థానానికి మూలకాన్ని సెట్ చేయాలి ఎందుకంటే ఇది డిఫాల్ట్ విలువ.
సంపూర్ణ CSS స్థాన
సంపూర్ణ స్థానాలు బహుశా అర్థం చేసుకోవడానికి సులభమైన CSS స్థానం. మీరు ఈ CSS స్థానం ఆస్తితో ప్రారంభం:
స్థానం: సంపూర్ణ;
ఈ విలువ బ్రౌజర్ యొక్క సాధారణ ప్రవాహం నుండి తొలగించబడాలని మరియు బదులుగా పేజీలో ఖచ్చితమైన స్థానానికి ఉంచబడిందని బ్రౌజర్కు చెబుతుంది. ఇది ఆ మూలకం యొక్క అత్యుత్తమ కాని గణాంక స్థితి పూర్వీకుల ఆధారంగా లెక్కించబడుతుంది. పత్రం యొక్క సాధారణ ప్రవాహం నుండి పూర్తిగా తొలగించబడిన మూలకం బయటకు తీసినందున, ఇది HTML లేదా దాని తర్వాత ఉన్న అంశాలను వెబ్పేజీలో ఎలా ఉంచాలో ప్రభావితం చేస్తుంది. ఉదాహరణగా, మీరు విభజనను కలిగి ఉన్నట్లయితే మరియు ఆ విభాగానికి లోపల ఉన్న విభజనను కలిగి ఉంటే, మీరు డివిజన్ యొక్క ఎగువ నుండి 50 పిక్సెలను ఉంచాలనుకుంటున్న ఒక పేరాను కలిగి ఉంటుంది, సంపూర్ణ ఆ పేరాకి ఆఫ్సెట్ విలువతో పాటు 50px న టాప్ ఆస్తి, ఇలా: స్థానం: సంపూర్ణ;టాప్: 50px;
ఈ పూర్తిగా స్థిరమైన మూలకం ఎల్లప్పుడూ ఆ సాపేక్షంగా స్థాన విభాగానికి ఎగువ నుండి 50 పిక్సెళ్ళు ప్రదర్శిస్తుంది, సాధారణ ప్రవాహంలో ఏమైనా ప్రదర్శిస్తున్నప్పటికీ. మీ ఖచ్చితంగా స్థిరమైన మూలకం సాపేక్షంగా స్థానానికి చెందిన దాని సందర్భంగా ఉపయోగిస్తుంది, మరియు మీరు ఉపయోగించే స్థాన విలువ దానితో సంబంధం కలిగి ఉంటుంది. మీరు ఉపయోగించడానికి అందుబాటులో ఉన్న నాలుగు స్థాన లక్షణాలు: మీరు ఉపయోగించవచ్చు టాప్ లేదా దిగువ - ఈ విలువలు రెండింటి ప్రకారం ఒక మూలకాన్ని ఉంచలేము - మరియు గాని కుడి లేదా వదిలి. ఒక మూలకం సంపూర్ణ స్థితికి సెట్ చేయబడి ఉంటే, కాని అది ఎటువంటి గణాంక-స్థాన పూర్వ పూర్వీకులను కలిగివుండకపోతే, అది శరీర మూలకానికి సంబంధించి ఉంచుతుంది, ఇది పేజీ యొక్క అత్యధిక స్థాయి మూలకం. సాపేక్ష స్థానత ఒకే నాలుగు స్థాన లక్షణాలను సంపూర్ణ స్థానంగా ఉపయోగిస్తుంది, కానీ బ్యాలెట్ స్థితిని బట్టి, అతి దగ్గరగా ఉన్న స్థిరంగా లేని స్థిరమైన పూర్వీకుడిపై, బదులుగా అది సాధారణ ప్రవాహంలో ఉన్నట్లయితే మూలకం ఎక్కడ నుండి మొదలవుతుంది. ఉదాహరణకు, మీరు మీ వెబ్పేజీలో మూడు పేరాలు కలిగి ఉంటే, మరియు మూడవది a స్థానం: సాపేక్ష శైలి దాని స్థానం, దాని స్థానం దాని ప్రస్తుత స్థానాన్ని ఆధారంగా ఆఫ్సెట్. పేరా 1. పేరా 2. పేరా 3. పైన పేర్కొన్న ఉదాహరణలో, మూడవ పేరా కంటెయినర్ మూలకం యొక్క ఎడమ వైపు నుండి 2 వ స్థానంలో ఉండి, మొదటి రెండు పేరాలకు దిగువన ఉంటుంది. ఇది పత్రం యొక్క సాధారణ ప్రవాహం లో ఉంది మరియు కొద్దిగా ఆఫ్సెట్ ఉంది. మీరు దీనిని మార్చినట్లయితే స్థానం: సంపూర్ణ, అది ఏదైనా పైన ఉన్నదానిని ప్రదర్శిస్తుంది, ఎందుకంటే ఇది పత్రం యొక్క సాధారణ ప్రవాహంలో లేదు. వెబ్పేజీలో ఎలిమెంట్స్ తరచుగా విలువను సెట్ చేయడానికి ఉపయోగిస్తారు స్థానం: సాపేక్ష ఇది ఆఫ్సెట్ విలువను కలిగి ఉండదు, అనగా అది సాధారణ ప్రవాహంలో కనిపించే సరిగ్గా ఉండిపోతుంది. ఇతర అంశాలని పూర్తిగా స్థిరంగా ఉంచే సందర్భంలో ఈ మూలకాన్ని ఏర్పాటు చేయడానికి ఇది పూర్తిగా జరుగుతుంది. ఉదాహరణకు, మీరు మీ మొత్తం వెబ్ సైట్ యొక్క తరగతి విలువను కలిగి ఉన్న విభాగాన్ని కలిగి ఉంటే కంటైనర్, ఇది వెబ్ డిజైన్ లో ఒక సాధారణ దృశ్యం, ఆ డివిజన్ ఒక స్థానానికి అమర్చవచ్చు సంబంధిత అందువల్ల దాని లోపల ఏదైనా ఒక స్థాన సందర్భం గా ఉపయోగించుకోవచ్చు. స్థిర స్థానాలు సంపూర్ణ స్థానాలు వంటివి. మూలకం యొక్క స్థానం సంపూర్ణ నమూనా వలె అదే విధంగా లెక్కించబడుతుంది, అయితే స్థిరమైన అంశాలు అప్పుడు ఆ స్థానంలో స్థిరపడినవి - దాదాపు ఒక వాటర్మార్క్ లాగా ఉంటాయి. పేజీలోని మిగిలినవి ఆ మూలకాలకు ముందు స్క్రోల్ చేస్తుంది. ఈ ఆస్తి విలువను ఉపయోగించడానికి, మీరు సెట్ చేసారు: స్థానం: పరిష్కరించబడింది;
గుర్తుంచుకోండి, మీరు మీ సైట్లో స్థానంలో ఒక మూలకాన్ని పరిష్కరించినప్పుడు, మీ వెబ్పేజీ ముద్రితమైనప్పుడు అది ఆ ప్రదేశంలో ముద్రిస్తుంది. ఉదాహరణకు, మీ పేజీ మీ పేజీ ఎగువన స్థిరపడినట్లయితే, అది ప్రతి ముద్రించిన పేజీ ఎగువ భాగంలో కనిపిస్తుంది ఎందుకంటే ఇది పేజీ ఎగువ భాగంలో స్థిరపడుతుంది. మీరు ముద్రించిన పేజీలు స్థిర అంశాలను ఎలా ప్రదర్శించాలో మార్చడానికి మీడియా రకాలను ఉపయోగించవచ్చు: @ మీడియా స్క్రీన్ { h1 # మొదటి {స్థానం: స్థిర; } } @ మీడియా ప్రింట్ { h1 # మొదటి {స్థానం: స్టాటిక్; } }
సాపేక్ష స్థాన
స్థిర స్థానం గురించి ఏమిటి?
