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