CSS position प्रॉपर्टी HTML पेज पर किसी एलिमेंट की स्थिति को संशोधित करती है। top, right, left, और bottom प्रॉपर्टीज परिभाषित करती हैं कि कोई एलिमेंट बॉक्स के किनारे के सापेक्ष कहां स्थित है। CSS position प्रॉपर्टी के पांच मान हैं: static, fixed, relative, sticky, और absolute।
अच्छे वेब डिजाइन का एक महत्वपूर्ण हिस्सा विनिर्देश के आधार पर एलिमेंट्स को सही जगह पर रखना है।
यहीं CSS position प्रॉपर्टी काम आती है। position प्रॉपर्टी के पांच मान हैं जिनका उपयोग आप यह परिभाषित करने के लिए कर सकते हैं कि किसी एलिमेंट को वेब पेज पर कैसे स्थित किया जाना चाहिए।
यह ट्यूटोरियल उदाहरणों के साथ चर्चा करेगा कि वेब पेज पर किसी एलिमेंट को स्थिति देने के लिए position प्रॉपर्टी का उपयोग कैसे करें। इस ट्यूटोरियल को पढ़ने के बाद, आप CSS में position प्रॉपर्टी का उपयोग करके वेब पेज पर एलिमेंट्स को स्थिति देने में विशेषज्ञ होंगे।
CSS Position
position प्रॉपर्टी आपको वेब पेज पर किसी एलिमेंट की स्थिति को परिभाषित करने की अनुमति देती है। position प्रॉपर्टी का सिंटैक्स इस प्रकार है:
position: positionType;
कई स्थितियां हैं जहां position प्रॉपर्टी उपयोगी हो सकती है। उदाहरण के लिए, आप पेज के निचले भाग में फिक्स्ड एक नेविगेशन बार डिजाइन करना चाह सकते हैं।
वेब पेज पर किसी एलिमेंट की स्थिति सेट करने के लिए आप पांच मानों का उपयोग कर सकते हैं:
- static
- fixed
- relative
- sticky
- absolute
ऊपर दिए गए पांच मानों में से किसी एक का उपयोग करके, आप निर्दिष्ट कर सकते हैं कि किसी एलिमेंट को कैसे स्थित किया जाना चाहिए। आप पेज पर एलिमेंट की स्थिति को और परिभाषित करने के लिए top, bottom, left, और right प्रॉपर्टीज का उपयोग कर सकते हैं। हम इस लेख में अपने उदाहरणों में चर्चा करेंगे कि यह कैसे काम करता है।
CSS Position Values
हम position प्रॉपर्टी के प्रत्येक संभावित मान का उपयोग कैसे करें, इसका पता लगाना शुरू कर सकते हैं। आइए position प्रॉपर्टी के साथ उपयोग किए जा सकने वाले प्रत्येक मान का एक उदाहरण देखें।
Static Position
HTML एलिमेंट्स डिफ़ॉल्ट रूप से static के रूप में स्थित होते हैं। इसका मतलब है कि कोई एलिमेंट top, bottom, left, और right CSS प्रॉपर्टीज से प्रभावित नहीं होता है। ब्राउज़र स्वचालित रूप से एलिमेंट्स को static स्थिति में रेंडर करते हैं जब तक कि कोड अन्यथा इंगित न करे।
उदाहरण के लिए, मान लीजिए हम एक बॉक्स डिजाइन कर रहे हैं जिसमें कुछ टेक्स्ट है। यदि हम इस बॉक्स की सामग्री को डिफ़ॉल्ट स्थितियों का उपयोग करके स्थित करना चाहते हैं, तो हम इस कोड का उपयोग कर सकते हैं:
<html> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { position: static; border: 2px solid lightblue; }
उपरोक्त कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमने एक बॉक्स बनाया जो पेज पर स्थिर रूप से स्थित है। दूसरे शब्दों में, बॉक्स को किसी विशेष तरीके से स्थित नहीं किया गया है; बल्कि, इसकी स्थिति ब्राउज़र डिफ़ॉल्ट पर आधारित है। हमारे बॉक्स में 2px चौड़ी ठोस हल्की नीली बॉर्डर है। यह बॉर्डर बॉक्स को अधिक दृश्यमान बनाती है।
Fixed Position
Fixed मान किसी एलिमेंट को वेब पेज पर एक विशेष स्थान पर स्थित करता है।
जब आप fixed मान का उपयोग करते हैं, तो वह एलिमेंट जो fixed है, हमेशा उसी स्थान पर रहेगा। एलिमेंट तब भी फिक्स्ड रहेगा जब उपयोगकर्ता वेब पेज को नीचे स्क्रॉल करता है। ऐसा इसलिए है क्योंकि एलिमेंट को सामान्य वेब पेज व्यू से हटा दिया जाता है। Fixed मान प्रॉपर्टी का उपयोग करके किसी एलिमेंट को स्थिति देने के लिए, आपको top, right, bottom, और left प्रॉपर्टीज का उपयोग करना होगा।
हम एक बॉक्स बनाना चाहते हैं और इसे वेब पेज के निचले दाएं कोने पर फिक्स करना चाहते हैं। हम निम्न कोड का उपयोग करके ऐसा कर सकते हैं:
<html> <p>This is the contents of a web page.</p> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { width: 200px; border: 2px solid lightblue; position: fixed; bottom: 0; right: 0; }
उपरोक्त कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
इस उदाहरण में, हमने एक बॉक्स बनाने के लिए fixed position मान का उपयोग किया जो वेब पेज पर एक विशिष्ट स्थिति पर फिक्स्ड है। bottom: 0 और right: 0 प्रॉपर्टीज बॉक्स को वेब पेज के निचले दाएं कोने पर स्थित करती हैं।
हमने निर्दिष्ट किया कि हमारे बॉक्स की चौड़ाई 200px होनी चाहिए। हमारे बॉक्स में 2px ठोस हल्की नीली बॉर्डर होनी चाहिए। ये स्टाइल्स हमारे बॉक्स को आसानी से दृश्यमान बनाती हैं।
जैसा कि आप ऊपर की छवि में देख सकते हैं, हमारा बॉक्स हमारे वेब पेज के निचले दाएं कोने में स्थित है। जब उपयोगकर्ता नीचे स्क्रॉल करता है, तो बॉक्स स्क्रीन पर अपनी स्थिति बनाए रखेगा। इसका मतलब है कि उपयोगकर्ता स्क्रॉल करते समय भी बॉक्स को अपनी स्क्रीन के निचले दाएं कोने पर देखता रहेगा।
Relative Position
Relative मान किसी एलिमेंट को उसकी डिफ़ॉल्ट स्थिति के सापेक्ष स्थित करता है।
Relative मान का उपयोग top, bottom, left, या right प्रॉपर्टी के साथ किया जाता है। वे चार प्रॉपर्टीज निर्दिष्ट करती हैं कि कोई एलिमेंट अपनी डिफ़ॉल्ट स्थिति से कैसे ऑफसेट होगा। एक अपेक्षाकृत स्थित बॉक्स द्वारा बनाया गया स्थान किसी अन्य एलिमेंट द्वारा भरा नहीं जाएगा।
उदाहरण के लिए, यदि आप किसी एलिमेंट को 50px बाएं बॉर्डर के सापेक्ष स्थित करना चाहते हैं, तो आप left प्रॉपर्टी के लिए एक मान निर्दिष्ट करेंगे। ऐसा बॉक्स बनाने के लिए हम जिस कोड का उपयोग करेंगे वह यहां दिया गया है:
<html> <p>This is the contents of a web page.</p> <div class="outer"> <p>This is a positioned box.</p> </div> <style> .outer { position: relative; left: 50px; border: 2px solid lightblue; }
उपरोक्त कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
इस उदाहरण में, हमने सापेक्ष स्थिति के साथ एक बॉक्स परिभाषित किया। हमने अपने बॉक्स को बाएं से 50px ऑफसेट करने के लिए left प्रॉपर्टी का उपयोग किया। जैसा कि आप देख सकते हैं, हमारे पेज की शुरुआत और हमारे बॉक्स की शुरुआत के बीच 50px का अंतर है। हमने इसे position: relative और left: 50px प्रॉपर्टीज का उपयोग करके बनाया है।
हमारे बॉक्स के बाईं ओर बनाया गया स्थान किसी अन्य एलिमेंट द्वारा भरा नहीं जाएगा।
Sticky Position
Sticky position मान किसी एलिमेंट को तब तक सापेक्ष रूप से स्थित करता है जब तक कोई विज़िटर एक थ्रेशोल्ड पार नहीं करता। फिर, एलिमेंट की एक फिक्स्ड स्थिति होती है।
Sticky position अनिवार्य रूप से relative और fixed स्थितियों का मिश्रण है। जब एक sticky एलिमेंट लोड होता है, तो यह अपेक्षाकृत स्थित होता है। उपयोगकर्ता द्वारा पेज पर एक निश्चित बिंदु से नीचे स्क्रॉल करने के बाद एलिमेंट एक फिक्स्ड स्थिति से बंधा रहता है।
Sticky position का उपयोग करना उपयोगी होता है यदि आप किसी दस्तावेज़ के प्रवाह को संरक्षित करना चाहते हैं। आप एलिमेंट्स को एक विशेष स्थिति पर चिपका सकते हैं ताकि कोई विज़िटर उस एलिमेंट को न खोए।
Sticky position का उपयोग आमतौर पर नेविगेशन बार के साथ किया जाता है जो उपयोगकर्ता द्वारा पेज को नीचे स्क्रॉल करने पर स्क्रीन के शीर्ष पर चिपक जाते हैं।
हम चाहते हैं कि एक बॉक्स हमारे पेज के शीर्ष पर दिखाई दे। यह बॉक्स कुछ टेक्स्ट के बाद दिखाई देना चाहिए और फिर जब उपयोगकर्ता छवि तक नीचे स्क्रॉल करे तो शीर्ष पर चिपक जाना चाहिए। हम इस कार्य को पूरा करने के लिए निम्न कोड का उपयोग कर सकते हैं:
<html> <p>Lorem ipsum dolor sit amet, … </p> <div> <p class="inner">This is a positioned box.</p> </div> <p>Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Tortor at auctor urna nunc id. … </p> <style> .inner { position: sticky; top: 0; border: 2px solid lightblue; }
उपरोक्त कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
इस छवि में, आप देख सकते हैं कि बॉक्स हमारे पहले पैराग्राफ टेक्स्ट के बाद दिखाई देता है। ऐसा इसलिए है क्योंकि उपयोगकर्ता ने अभी तक नीचे स्क्रॉल नहीं किया है और बॉक्स से नहीं मिला है। यह वही होता है जब हमारा उपयोगकर्ता बॉक्स के पार नीचे स्क्रॉल करता है:
हमारे पेज के शीर्ष पर, हमारे पास Lorem ipsum … मानक टेक्स्ट का एक पैराग्राफ है। हमने This is a positioned box टेक्स्ट वाला एक बॉक्स इस पैराग्राफ के नीचे फिक्स किया। इसके अतिरिक्त, जब उपयोगकर्ता उस स्थित बॉक्स तक नीचे स्क्रॉल करता है जिसे हमने घोषित किया है, तो बॉक्स स्क्रीन के शीर्ष से बंध जाता है। जैसे-जैसे उपयोगकर्ता स्क्रॉल करता रहता है, बॉक्स उनकी स्क्रीन के शीर्ष पर रहता है।
बॉक्स दो पैराग्राफ टेक्स्ट के बीच अपनी प्रारंभिक स्थिति पर वापस आ जाएगा। यह केवल तभी होगा जब कोई उपयोगकर्ता बॉक्स से ऊपर स्क्रॉल करे।
Absolute Position
Absolute मान किसी एलिमेंट को किसी अन्य, पहले से स्थित एलिमेंट के सापेक्ष स्थित करता है।
Absolute प्रॉपर्टी किसी एलिमेंट को किसी अन्य, पहले से स्थित एलिमेंट के सापेक्ष स्थित करती है। उदाहरण के लिए, एक absolute स्थित एलिमेंट एक बॉक्स के अंदर का टेक्स्ट हो सकता है जिसमें एक पैराग्राफ टेक्स्ट शामिल है। इस बॉक्स की relative या fixed स्थिति हो सकती है।
हम एक बॉक्स डिजाइन कर रहे हैं जिसे हम किसी अन्य बॉक्स के निचले बाएं कोने पर दिखाना चाहते हैं। हम निम्न कोड का उपयोग करके ये बॉक्स बना सकते हैं:
<html> <div class="outer"> <p>This is the outer box.</p> <p class="inner">This is a positioned box.</p> </div> <style> .outer { position: relative; border: 2px solid lightblue; width: 300px; height: 300px; } .inner { position: absolute; left: 0; bottom: 0; border: 2px solid pink; }
उपरोक्त कोड एडिटर में बटन पर क्लिक करके हमारे HTML/CSS कोड का आउटपुट देखें।
हमारी HTML फाइल में, हम दो बॉक्स परिभाषित करते हैं। हम <div> टैग का उपयोग करके पहला बॉक्स घोषित करते हैं और इसे outer क्लास असाइन करते हैं। इसका मतलब है कि बॉक्स में outer क्लास से जुड़े CSS स्टाइल होंगे। हम <p> टैग का उपयोग करके दूसरा बॉक्स घोषित करते हैं और इसे inner क्लास असाइन करते हैं।
हमारी CSS फाइल में, हम निर्दिष्ट करते हैं कि हमारा बाहरी बॉक्स होना चाहिए:
- वेब पेज पर अन्य एलिमेंट्स के सापेक्ष स्थित।
- 2px चौड़ी ठोस हल्की नीली बॉर्डर हो।
- 300px चौड़ा और 300px ऊंचा हो।
हम निर्दिष्ट करते हैं कि हमारा आंतरिक बॉक्स होना चाहिए:
- Absolutely स्थित।
- हमारे बाहरी बॉक्स के निचले बाएं पर स्थित (left: 0, bottom: 0 का उपयोग करके)।
- 2px चौड़ी ठोस गुलाबी बॉर्डर हो।
इस उदाहरण में हमने गुलाबी बॉक्स (inner) को outer बॉक्स के निचले बाएं कोने पर स्थित किया। यदि हम दूसरी ओर fixed कीवर्ड का उपयोग करते, तो गुलाबी बॉक्स हमारे वेब पेज के निचले भाग पर स्थित होता।
निष्कर्ष
CSS position प्रॉपर्टी वेब पेज पर किसी एलिमेंट की स्थिति को परिभाषित करती है। top, right, bottom, और left प्रॉपर्टीज किसी एलिमेंट को वेब पेज पर एक विशेष स्थान पर रखती हैं। अब आप position प्रॉपर्टी का उपयोग करके CSS में एलिमेंट्स को पेशेवर की तरह स्थित करने के लिए तैयार हैं!
