HTML में स्टिकी एलिमेंट कैसे बनाएं

यह ब्लॉग CSS स्थिति संपत्ति और HTML में चिपचिपा तत्व बनाने की विधि पर चर्चा करेगा।

सीएसएस पोजीशन प्रॉपर्टी क्या है?

CSS स्थिति संपत्ति HTML तत्वों की स्थिति निर्धारण विधि को निर्दिष्ट करती है, जो एक निरपेक्ष, चिपचिपा, सांख्यिकीय, निश्चित, उत्तराधिकारी, सापेक्ष या प्रारंभिक हो सकती है।

वाक्य - विन्यास

ऊपर दिए गए सिंटैक्स से पता चलता है कि स्थिति संपत्ति के अलग-अलग मूल्य हैं। उन्हें तदनुसार सौंपा जा सकता है।

अब, HTML में चिपचिपा तत्व बनाने की प्रक्रिया देखें।

सीएसएस स्थिति क्या है: चिपचिपा?

HTML तत्व के साथ ' चिपचिपा ” स्थिति की एक सापेक्ष स्थिति होती है जब तक कि यह एक बिंदु तक नहीं पहुंच जाती है और फिर एक चिपचिपे तत्व की तरह काम करती है।

सीएसएस स्टिकी पोजीशन की अवधारणा को समझने के लिए आइए सरल उदाहरण देखें।

उदाहरण: HTML में स्टिकी एलीमेंट कैसे बनाएं?
HTML फ़ाइल में, शीर्षक के लिए

, पैराग्राफ के लिए

और वर्ग का नाम रखने के लिए

जोड़ें चिपचिपा ”। फिर, एक सूची

के साथ नेस्टेड ऑर्डर वाली सूची

वाला

टैग जोड़ें।

टिप्पणी : हमने एक लंबी सूची ली है ताकि हमारे पृष्ठ को स्क्रॉल करने पर आप चिपचिपा तत्व के व्यवहार को देख सकें।

एचटीएमएल

< एच 2 > स्टिकी नोट्स: स्टिकी एलिमेंट का प्रभाव देखें < / एच 2 >
< पी > स्थिति: चिपचिपा < / पी >
< डिव कक्षा = 'चिपचिपा' > यह मेरी टू-डू सूची है! < / डिव >
< पी >
< राजभाषा >
< वह > प्रबंधक को कॉल करो < / वह >
< वह > कर्मचारियों के साथ बैठक < / वह >
< वह > रिपोर्ट जमा करो < / वह >
< वह > डॉक्टर के पास जाना < / वह >
< वह > विमान में स्थान आरक्षण हेतु आवेदन < / वह >
< वह > टहलने के लिए जाना। < / वह >
< वह > किराने के लिए जाओ। < / वह >
< वह > टीवी देखो < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< वह > कुछ पाठ। < / वह >
< / राजभाषा >
< / पी >

अगला, हम स्टिकी नाम के डिव को स्टाइल प्रदान करेंगे:

• यहां, ' ।चिपचिपा ” उस वर्ग का प्रतिनिधित्व करता है जिसमें शैली के गुणों को लागू करने की आवश्यकता होती है।
• कर्ली ब्रैकेट्स के अंदर, हम असाइन करेंगे “ स्थान 'संपत्ति मूल्य' के रूप में चिपचिपा ”।
• ' ऊपर '' के रूप में सेट किया गया है 0 ”।
• ' पीछे का रंग ' है ' #00154एफ ”।
• कुछ देना ' गद्दी ' के रूप में अपना मान सेट करके div को ' 40 पीएक्स ”।
• ' फ़ॉन्ट आकार ' जैसा ' 30 पीएक्स ”।
• ' रंग 'फोंट' के रूप में सेट किया गया है सफेद ”।

सीएसएस

।चिपचिपा {
स्थान : चिपचिपा ;
ऊपर : 0 ;
पीछे का रंग : #00154एफ ;
गद्दी : 40 पीएक्स ;
फ़ॉन्ट आकार : 30 पीएक्स ;
रंग : सफेद ;
}

HTML फाइल को सेव करें और आउटपुट देखने के लिए इसे ब्राउजर में खोलें:



बोनस टिप

का उपयोग करके एचएसएलए () ” विधि, आप निम्नानुसार जोड़े गए चिपचिपा तत्व के लिए एक पारदर्शी पृष्ठभूमि सेट कर सकते हैं:

पार्श्वभूमि - रंग : hsla ( 0 , 100 %, 90 %, 0.8 ) ;

उत्पादन



इस प्रकार CSS सेट करके तत्व विशिष्ट स्थिति से चिपक जाता है ” स्थान 'संपत्ति मूल्य' के रूप में चिपचिपा ”।

निष्कर्ष

' चिपचिपा CSS में स्थिति, तत्व की स्थिति को सापेक्ष और निश्चित के बीच टॉगल करती है। परिणामस्वरूप, जोड़ा गया चिपचिपा तत्व स्क्रॉल के सापेक्ष तब तक स्थित होता है जब तक कि यह एक निश्चित बिंदु तक नहीं पहुंच जाता है जब यह चिपचिपा की तरह व्यवहार करता है। आप hsla() पद्धति का उपयोग करके जोड़े गए चिपचिपा तत्व के पारदर्शिता स्तर को भी समायोजित कर सकते हैं। इस ब्लॉग ने आपको सरल और चिपचिपा पारदर्शी तत्व बनाने के बारे में निर्देशित किया।