व्यावहारिक उदाहरणों के साथ CSS स्थिति संपत्ति को समझें

क्या आप अपने डिजाइन कौशल में सुधार करना चाहते हैं और अपनी वेबसाइट पर उपयोगकर्ता अनुभव को बढ़ाना चाहते हैं? तत्वों की स्थिति के लिए विभिन्न सीएसएस विधियों की पूरी समझ के साथ यह आसान है। आप वेब डिज़ाइन की बुनियादी समझ के साथ एक अद्भुत वेब पेज बना सकते हैं। लेकिन मुख्य समस्या तब उत्पन्न होती है जब आपका वेब प्रोजेक्ट अधिक विस्तार-उन्मुख हो जाता है, खासकर यदि इसके लिए ऑन-पेज तत्वों के जटिल संरेखण की आवश्यकता होती है।

सौभाग्य से, आप अपनी साइट की कार्यक्षमता में सुधार कर सकते हैं और सही CSS पोजिशनिंग का उपयोग करके अपने वर्कफ़्लो को तेज़ कर सकते हैं। आइए विभिन्न सीएसएस पोजिशनिंग गुणों का पता लगाएं और उन विभिन्न लेआउट की समीक्षा करें जिनका उपयोग आप एक आधुनिक वेबपेज बनाने के लिए कर सकते हैं।

CSS स्थिति संपत्ति क्या है?

CSS स्थिति गुण किसी तत्व की स्थिति को परिभाषित करता है। आप बाएं , दाएं , ऊपर , नीचे और जेड-इंडेक्स गुणों वाले तत्व के स्थान में हेरफेर कर सकते हैं। यद्यपि आप सममित वेबसाइट बनाने के लिए CSS Flexbox या CSS ग्रिड का उपयोग कर सकते हैं, स्थिति गुण आपको प्रत्येक तत्व को अन्य तत्वों से अलग करके विषम वेबसाइट बनाने में मदद करते हैं।

दूसरे शब्दों में, सीएसएस स्थिति संपत्ति तत्वों को दस्तावेज़ में स्वतंत्र रूप से स्थानांतरित करने की अनुमति देती है।

सीएसएस स्थिति संपत्ति के लिए वाक्य रचना है:

 position: value;

यहां पांच मान दिए गए हैं जो स्थिति संपत्ति ले सकते हैं:

  1. स्थिर
  2. रिश्तेदार
  3. शुद्ध
  4. तय
  5. चिपचिपा

नोट: आप बाएँ, दाएँ, ऊपर और नीचे के गुणों का उपयोग करके तत्वों की स्थिति बना सकते हैं। लेकिन ये गुण स्थिति के मूल्य के आधार पर अलग तरह से व्यवहार करते हैं।

सीएसएस स्टेटिक पोजिशनिंग

HTML तत्वों के लिए स्टेटिक डिफ़ॉल्ट स्थिति है। आइए इसे समझने के लिए HTML का कुछ उदाहरण देखें:

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Position Property</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="parent_container utility-flex">
<div class="child_1 utility-flex">Child 01</div>
<div class="child_2 utility-flex">Child 02</div>
<div class="child_3 utility-flex">Child 03</div>
</div>
</body>
</html>

हमने तीन बच्चों को एक पैरेंट कंटेनर में रखा है। हम इस उदाहरण का उपयोग विभिन्न स्थिति गुणों के साथ खेलने के लिए करेंगे। यहां आधार सीएसएस है जिसका हमारे प्रत्येक उदाहरण उपयोग करेगा:

 .utility-flex {
display: flex;
justify-content: center;
align-items: center;
}

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
}

.child_1,
.child_2,
.child_3 {
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
font-weight: 600;
background: #e961ee;
border: 5px solid rgb(255, 255, 255);
width: 300px;
height: 100px;
color: rgb(238, 238, 238);
border-radius: 5px;
margin: 5px;
}

अब, नीचे और दाएं गुणों वाले दूसरे बच्चे के लिए स्थिति: स्थिर जोड़ें।

 .child_2 {
position: static;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

यहाँ परिणाम है:

जैसा कि आप देख सकते हैं, सीमा संपत्ति लागू होती है लेकिन दूसरे बच्चे की स्थिति में कोई अंतर नहीं होता है। यदि आप CSS स्थिति गुण लागू नहीं करते हैं, तो यह डिफ़ॉल्ट मान के रूप में स्थिर हो जाएगा। यह मानक पृष्ठ प्रवाह के अनुसार एक तत्व की स्थिति बनाता है। स्थिर स्थिति वाला कोई भी तत्व बाएँ, दाएँ, ऊपर, नीचे और z-सूचकांक गुणों की उपेक्षा करेगा।

सीएसएस सापेक्ष स्थिति

जब आप सापेक्ष स्थिति लागू करते हैं, तो एक तत्व शुरू में स्थिर स्थिति के समान ही व्यवहार करेगा। लेकिन अब, बाएँ, दाएँ, ऊपर, नीचे और z-सूचकांक गुण चयनित तत्व को उसकी मूल स्थिति से निर्दिष्ट दिशा में कुहनी देकर काम करेंगे।

आइए पहले के समान शीर्ष और निचले गुणों के साथ दूसरे बच्चे की स्थिति मान को स्थिर से सापेक्ष में बदलें।

 .child_2 {
position: relative;
bottom: 40px;
right: 50px;
border: 8px solid purple;
}

यहाँ परिणाम है:

जैसा कि आप देख सकते हैं, दूसरे बच्चे को नीचे से (ऊपर की ओर) 40px और दाईं ओर से (बाईं ओर) 50px स्थानांतरित किया गया है।

सीएसएस एब्सोल्यूट पोजिशनिंग

पूर्ण स्थिति वाला कोई भी तत्व दस्तावेज़ के सामान्य प्रवाह से हटा दिया जाता है। अन्य तत्व ऐसा व्यवहार करेंगे जैसे वह तत्व दस्तावेज़ में मौजूद नहीं है। तत्व की अंतिम स्थिति ऊपर, नीचे, बाएँ और दाएँ गुणों द्वारा तय की जाती है।

ध्यान दें कि पूर्ण स्थिति वाला तत्व अपने निकटतम स्थित (गैर-स्थैतिक) पूर्वज के सापेक्ष स्थित है। यदि कोई पूर्वज नहीं है, तो यह प्रारंभिक युक्त ब्लॉक के सापेक्ष स्थित है।

आइए इसे दो उदाहरणों से समझते हैं। सबसे पहले, एक पूर्ण-स्थिति वाला बच्चा जिसका कोई पूर्वज नहीं है:

 .parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
}

.child_2 {
position: absolute;
bottom: 190px;
right: 500px;
border: 8px solid purple;
}

यहाँ परिणाम है:

इस दूसरे उदाहरण में, पैरेंट कंटेनर में एक गैर-स्थिर स्थिति है:

 .parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
height: 400px;
margin: auto;
position: relative;
}

.child_2 {
position: absolute;
bottom: 20px;
right: 150px;
border: 8px solid purple;
}

बच्चा अब अपने कंटेनर के संबंध में स्थित है:

सीएसएस फिक्स्ड पोजिशनिंग

एक निश्चित स्थिति वाला तत्व भी दस्तावेज़ के सामान्य प्रवाह से हटा दिया जाता है। संपूर्ण पृष्ठ लेआउट में उस तत्व के लिए कोई स्थान नहीं बनाया गया है। यह व्यूपोर्ट द्वारा सेट किए गए प्रारंभिक युक्त ब्लॉक के सापेक्ष स्थित है (सिवाय इसके कि जब इसके किसी भी पूर्वज के पास फ़िल्टर, ट्रांसफ़ॉर्म या परिप्रेक्ष्य संपत्ति किसी भी अन्य मान पर सेट न हो)। ऊपर, बाएँ, दाएँ और नीचे के गुण तत्व की अंतिम स्थिति तय करेंगे।

आइए अधिक बच्चों को जोड़कर हमारे मौजूदा उदाहरण में बदलाव करें। पहले, हमने पैरेंट कंटेनर की ऊंचाई तय की थी। आइए इसे हटा दें और फ्लेक्स-दिशा: कॉलम सेट करें ताकि हमारा फ्लेक्स कंटेनर नीचे स्क्रॉल करने और परिणाम की कल्पना करने के लिए पर्याप्त हो। अब, दूसरे बच्चे के लिए निश्चित स्थिति संपत्ति जोड़ें जैसा कि नीचे दिखाया गया है:

 .utility-flex {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.parent_container {
background: rgb(255, 187, 98);
padding: 10px;
width: 600px;
/* height: 400px; */
margin: auto;
/* position: relative; */
}

.child_2 {
position: fixed;
bottom: 300px;
right: 100px;
border: 8px solid purple;
}

यहाँ परिणाम है:

इसलिए स्क्रॉल करने से दूसरे बच्चे की स्थिति बिल्कुल भी प्रभावित नहीं होती है। इसकी स्थिति व्यूपोर्ट द्वारा निर्धारित प्रारंभिक युक्त ब्लॉक के सापेक्ष तय की गई है। कभी-कभी, स्क्रॉल करने वाले तत्व प्रदर्शन और पहुंच-योग्यता समस्याओं का कारण बन सकते हैं। आप सिमेंटिक HTML और CSS का उपयोग करके एक सुलभ वेबसाइट बना सकते हैं

सीएसएस स्टिकी पोजिशनिंग

चिपचिपा स्थिति वाले तत्व में सापेक्ष और निश्चित स्थिति के मिश्रित गुण होते हैं। एक चिपचिपा स्थित तत्व सापेक्ष स्थिति गुणों का पालन करेगा जब तक कि वह निर्दिष्ट सीमा को पार नहीं कर लेता। उसके बाद, यह व्यवहार करेगा जैसे कि यह तय किया गया था, जब तक कि यह अपने माता-पिता की सीमा तक नहीं पहुंच जाता।

आप बाएँ, दाएँ, ऊपर और नीचे के गुणों का उपयोग करके थ्रेशोल्ड निर्दिष्ट कर सकते हैं। थ्रेशोल्ड के बिना, तत्व ऐसा व्यवहार करेगा जैसे कि उसकी सापेक्ष स्थिति हो।

आइए दूसरे बच्चे की स्थिति को शीर्ष सीमा के साथ चिपचिपा करने के लिए सेट करें:

 .child_2 {
position: sticky;
top: 0px;
border: 8px solid purple;
}

यहाँ परिणाम है:

जैसा कि आप देख सकते हैं, स्क्रॉल करते समय दूसरा बच्चा अन्य बच्चों की तरह व्यवहार करता है। लेकिन जब यह थ्रेशोल्ड मान (शीर्ष: 0px) तक पहुँच जाता है, तो यह ऐसा व्यवहार करता है जैसे कि यह तय हो गया हो और सामान्य दस्तावेज़ प्रवाह को छोड़ देता है। आप स्टिकी पोजिशनिंग के साथ नेविगेशन बार को हेडर से चिपका सकते हैं।

निष्कर्ष

CSS स्थिति संपत्ति एक उन्नत वेब डिज़ाइन कौशल है। इसमें कुछ सीखने की जरूरत है, लेकिन आपको बस इतना करना है कि विभिन्न मूल्यों, परिणामों और अपवादों के साथ खेलना है। याद रखें कि जब एक भयानक वेब डिज़ाइन बनाने की बात आती है तो अभ्यास को कोई हरा नहीं सकता है। इसलिए अभ्यास करते रहें और आप बेहतर हो जाएंगे। हैप्पी कोडिंग!