వెబ్ పేజీలను రూపకల్పన చేసేటప్పుడు అత్యంత ముఖ్యమైన విషయం మూలకాల యొక్క సరైన స్థానం. Tailwind 'స్థానం' తరగతులను ఉపయోగించడం ద్వారా దీన్ని సులభంగా చేయవచ్చు. స్థానాలు వివిధ రకాలుగా ఉండవచ్చు వాటిలో ఒకటి స్థిరమైనది.
మూలకాన్ని ఎలా స్థిరంగా ఉంచాలో ఈ బ్లాగ్ ప్రదర్శిస్తుంది.
DOM – Tailwindలో ఒక మూలకాన్ని స్థిరంగా ఎలా ఉంచాలి?
మూలకాన్ని 'ని ఉపయోగించి స్థిరంగా ఉంచవచ్చు స్థిరమైన 'స్థానం యొక్క తరగతి. స్టాటిక్ స్థానం HTML మూలకాల కోసం డిఫాల్ట్ స్థానం. 'తో కూడిన అంశాలు స్థానం: స్టాటిక్ ” ఎలాంటి CSS స్టైలింగ్ లేకుండా పేజీ యొక్క సాధారణ ప్రవాహం ఆధారంగా ఉంచబడ్డాయి.
వాక్యనిర్మాణం
దరఖాస్తు కోసం వాక్యనిర్మాణం ' స్థిరమైన 'తరగతి:
<మూలకం తరగతి = 'స్థిరమైన' > ... < / మూలకం>
ఇక్కడ, మూలకం స్థాన లక్షణాన్ని వర్తించే ఏదైనా ట్యాగ్ కావచ్చు.
స్టాటిక్ పొజిషనింగ్ యొక్క ఆచరణాత్మక అమలు కోసం కోడ్‌ను సందర్శించండి:
< శరీరం తరగతి = 'టెక్స్ట్-సెంటర్' >< కేంద్రం >
< h1 తరగతి = 'టెక్స్ట్-గ్రీన్-600 టెక్స్ట్-5xl ఫాంట్-బోల్డ్' >
స్టాటిక్ పొజిషన్ ఉదాహరణ
< / h1 >
< బి >టైల్‌విండ్ CSS పొజిషన్ క్లాస్< / బి >
< div తరగతి = 'స్టాటిక్ టెక్స్ట్-ఎడమ p-2 m-2 bg-green-200 h-48' >
< p తరగతి = 'ఫాంట్-బోల్డ్' > స్థిరంగా ఉంచబడింది< / p >
< div >అబ్సొల్యూట్ పొజిషన్డ్ ఎలిమెంట్< / p >
< / div >
< / div >
< / కేంద్రం >
< / శరీరం >
ఈ కోడ్‌లో:
- ' టెక్స్ట్-సెంటర్ ” ట్యాగ్‌ల కంటెంట్‌ను స్క్రీన్ మధ్యలో సర్దుబాటు చేస్తుంది.
- ఏర్పరచు ' ''ని ఉపయోగించి ఆకుపచ్చని ట్యాగ్ చేయండి టెక్స్ట్-ఆకుపచ్చ-600 ”, వచన పరిమాణం ఐదు రెట్లు సెట్ చేయబడింది వచనం-5×1 ' మరియు ఫాంట్ 'ని ఉపయోగించి నొక్కిచెప్పబడింది ఫాంట్-బోల్డ్ ”.
- రెండు ' 'మూలకాలు కూడా సృష్టించబడతాయి మరియు మొదటి కోసం స్టాటిక్ ఎడమ వైపు స్థానం సెట్ చేయబడింది' div 'ఉపయోగించి' స్టాటిక్ టెక్స్ట్-ఎడమ ”.
- ' తరగతులను కేటాయించండి p-2 ',' m-2 ',' bg-green-200 ',' h-48 ' రెండవ DIV కోసం మరియు దాని స్థానాన్ని సంపూర్ణ దిగువ-ఎడమకు 'ని ఉపయోగించి సెట్ చేయండి సంబంధిత దిగువ-0 ఎడమ-0 ” తరగతి.
అవుట్‌పుట్
పై కోడ్‌ని ఫైల్‌లో సేవ్ చేసి, దాని ద్వారా సృష్టించబడిన వెబ్‌పేజీని ప్రివ్యూ చేయండి:
స్థిరంగా ఉంచబడిన మూలకం సాధారణ పేజీ ప్రవాహంతో కదులుతుంది, ఇతర మూలకం దాని సంపూర్ణ స్థానాన్ని కలిగి ఉంటుంది.
ముగింపు
పత్రం యొక్క సాధారణ ప్రవాహంతో DOMలో ఒక మూలకాన్ని స్థిరంగా ఉంచడానికి, ' స్థిరమైన 'టైల్‌విండ్ తరగతి' స్థానం ' వినియోగ. ఏదైనా మూలకాన్ని ఎలా ఉంచాలో ఈ బ్లాగ్ చూపింది “ స్థిరంగా ” ఒక సాధారణ ఆచరణాత్మక ప్రదర్శనతో.