HTMLలో ఒక అంటుకునే మూలకాన్ని ఎలా సృష్టించాలి

ఈ బ్లాగ్ CSS స్థాన ప్రాపర్టీ మరియు HTMLలో స్టిక్కీ ఎలిమెంట్‌ని సృష్టించే పద్ధతి గురించి చర్చిస్తుంది.

CSS పొజిషన్ ప్రాపర్టీ అంటే ఏమిటి?

CSS పొజిషన్ ప్రాపర్టీ అనేది HTML మూలకాల యొక్క స్థాన పద్ధతిని నిర్దేశిస్తుంది, ఇది సంపూర్ణమైన, స్టికీ, స్టాటిస్టిక్, స్థిరమైన, వారసత్వంగా, సాపేక్షంగా లేదా ప్రారంభమైనది కావచ్చు.

వాక్యనిర్మాణం

పైన ఇచ్చిన వాక్యనిర్మాణం స్థాన లక్షణానికి భిన్నమైన విలువలను కలిగి ఉందని చూపిస్తుంది. వాటికి అనుగుణంగా కేటాయించవచ్చు.

ఇప్పుడు, HTMLలో స్టిక్కీ ఎలిమెంట్‌లను సృష్టించే విధానాన్ని చూద్దాం.

CSS స్థానం అంటే ఏమిటి: స్టిక్కీ?

HTML మూలకం ' అంటుకునే 'స్థానం ఒక బిందువుకు చేరుకునే వరకు సాపేక్ష స్థానాన్ని కలిగి ఉంటుంది మరియు ఆపై అంటుకునే మూలకం వలె పనిచేస్తుంది.

CSS స్టిక్కీ పొజిషన్ భావనను అర్థం చేసుకోవడానికి సరళమైన ఉదాహరణ ద్వారా వెళ్దాం.

ఉదాహరణ: HTMLలో స్టిక్కీ ఎలిమెంట్‌ను ఎలా సృష్టించాలి?
HTML ఫైల్‌లో, శీర్షిక కోసం

, పేరా కోసం

మరియు

అనే క్లాస్ పేరును జోడించండి. అంటుకునే ”. తర్వాత,

జాబితాతో

నెస్టెడ్ ఆర్డర్ చేసిన జాబితాను కలిగి ఉన్న

ట్యాగ్‌ని జోడించండి.

గమనిక : మేము సుదీర్ఘ జాబితాను తీసుకున్నాము, తద్వారా మా పేజీని స్క్రోల్ చేసిన తర్వాత, మీరు అంటుకునే మూలకం యొక్క ప్రవర్తనను గమనించవచ్చు.

HTML

< h2 > అంటుకునే గమనికలు: అంటుకునే మూలకం యొక్క ప్రభావాన్ని చూడండి < / h2 >
< p > స్థానం: అంటుకునే < / p >
< div తరగతి = 'అంటుకునే' > ఇది నా చేయవలసిన పనుల జాబితా! < / div >
< p >
< ఓల్ >
< అని > కాల్ మేనేజర్ < / అని >
< అని > ఉద్యోగులతో సమావేశం < / అని >
< అని > నివేదికను సమర్పించండి < / అని >
< అని > వైద్యుని దగ్గరకు వెళ్ళుము < / అని >
< అని > విమానం బుక్ చెయ్యండి < / అని >
< అని > నడక కోసం వెళ్ళండి. < / అని >
< అని > కిరాణా కోసం వెళ్ళండి. < / అని >
< అని > టీవీ చూడండి < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< అని > కొంత వచనం. < / అని >
< / ఓల్ >
< / p >

తర్వాత, మేము స్టిక్కీ అనే డివికి శైలిని అందిస్తాము:

• ఇక్కడ, ' .అంటుకునే ” శైలి లక్షణాలను వర్తింపజేయాల్సిన తరగతిని సూచిస్తుంది.
• కర్లీ బ్రాకెట్ల లోపల, మేము ' స్థానం 'ఆస్తి విలువ' అంటుకునే ”.
• ది ' టాప్ ” గా సెట్ చేయబడింది 0 ”.
• ది ' నేపథ్య రంగు 'అంటే' #00154f ”.
• కొంత ఇవ్వు' పాడింగ్ 'డివికి దాని విలువను సెట్ చేయడం ద్వారా' 40px ”.
• ' ఫాంట్ పరిమాణం 'వలే' 30px ”.
• ' రంగు 'ఫాంట్లు' గా సెట్ చేయబడింది తెలుపు ”.

CSS

.అంటుకునే {
స్థానం : అంటుకునే ;
టాప్ : 0 ;
నేపథ్య రంగు : #00154f ;
పాడింగ్ : 40px ;
ఫాంట్ పరిమాణం : 30px ;
రంగు : తెలుపు ;
}

HTML ఫైల్‌ను సేవ్ చేసి, అవుట్‌పుట్‌ని చూడటానికి బ్రౌజర్‌లో దాన్ని తెరవండి:



బోనస్ చిట్కా

'ని ఉపయోగించడం ద్వారా hsla() ” పద్ధతి, మీరు జోడించిన స్టిక్కీ ఎలిమెంట్ కోసం పారదర్శక నేపథ్యాన్ని ఈ క్రింది విధంగా సెట్ చేయవచ్చు:

నేపథ్య - రంగు : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

అవుట్‌పుట్



ఈ విధంగా మూలకం CSSని సెట్ చేయడం ద్వారా నిర్దిష్ట స్థానానికి అంటుకుంటుంది ' స్థానం 'ఆస్తి విలువ' అంటుకునే ”.

ముగింపు

ది ' అంటుకునే ” CSSలో స్థానం, మూలకం స్థానం సంబంధిత మరియు స్థిర మధ్య టోగుల్ చేస్తుంది. ఫలితంగా, జోడించిన స్టిక్కీ ఎలిమెంట్ స్క్రోల్‌కి సంబంధించి స్టికీగా ప్రవర్తించినప్పుడు అది ఒక నిర్దిష్ట బిందువుకు చేరుకునే వరకు ఉంచబడుతుంది. మీరు hsla() పద్ధతిని ఉపయోగించడం ద్వారా జోడించిన స్టిక్కీ ఎలిమెంట్ యొక్క పారదర్శకత స్థాయిని కూడా సర్దుబాటు చేయవచ్చు. ఈ బ్లాగ్ మీకు సరళమైన మరియు అంటుకునే పారదర్శక అంశాలను తయారు చేయడం గురించి మార్గనిర్దేశం చేసింది.