पूर्ण बनाम सापेक्ष - सीएसएस पोजिशनिंग समझाओ

सीएसएस पोजिशनिंग बस एक्स, वाई समन्वय से अधिक है

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

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

जबकि पूर्ण और रिश्तेदार दो सीएसएस स्थिति गुण होते हैं जो अक्सर वेब डिज़ाइन में उपयोग किए जाते हैं, वास्तव में स्थिति संपत्ति के लिए चार राज्य होते हैं:

• स्थिर
• पूर्ण
• सापेक्ष
• स्थिर

वेब पेज पर किसी भी तत्व के लिए स्टेटिक डिफ़ॉल्ट स्थिति है। यदि आप किसी तत्व की स्थिति को परिभाषित नहीं करते हैं, तो यह स्थिर होगा। इसका अर्थ यह है कि यह स्क्रीन पर प्रदर्शित होगा कि यह HTML दस्तावेज़ में कहां है और यह उस दस्तावेज़ के सामान्य प्रवाह के अंदर कैसे प्रदर्शित होगा।

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

पूर्ण सीएसएस पोजिशनिंग

पूर्ण स्थिति शायद समझने के लिए सबसे आसान सीएसएस स्थिति है। आप इस सीएसएस स्थिति संपत्ति से शुरू करते हैं:

स्थिति: पूर्ण;

यह मान ब्राउज़र को बताता है कि जो कुछ भी तैनात किया जा रहा है उसे दस्तावेज़ के सामान्य प्रवाह से हटा दिया जाना चाहिए और इसके बजाय पृष्ठ पर एक सटीक स्थान पर रखा जाना चाहिए। इसकी गणना उस तत्व के निकटतम गैर स्थैतिक रूप से स्थित पूर्वजों के आधार पर की जाती है।

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

एक उदाहरण के रूप में - यदि आपके पास एक विभाजन था जो रिश्तेदार के मूल्य का उपयोग करके तैनात किया गया था (हम जल्द ही इस मूल्य को देखेंगे), और उस प्रभाग के अंदर आपके पास एक पैराग्राफ था जिसे आप विभाजन के शीर्ष से 50 पिक्सल रखना चाहते थे, आप "शीर्ष" संपत्ति पर 50px के ऑफसेट मान के साथ उस पैराग्राफ में "पूर्ण" का स्थिति मान जोड़ देगा।

स्थिति: पूर्ण; शीर्ष: 50 पीएक्स;

यह बिल्कुल स्थित तत्व हमेशा उस अपेक्षाकृत स्थित विभाजन के शीर्ष से 50 पिक्सल प्रदर्शित करेगा - इससे कोई फर्क नहीं पड़ता कि सामान्य प्रवाह में और क्या प्रदर्शित होता है। आपका "बिल्कुल" स्थानित तत्व अपेक्षाकृत स्थानित व्यक्ति को इसके संदर्भ के रूप में उपयोग करता है और आपके द्वारा उपयोग किए जाने वाले सकारात्मक मूल्य से संबंधित है।

आपके पास उपयोग करने के लिए उपलब्ध चार पोजिशनिंग गुण हैं:

• चोटी
• सही
• तल
• बाएं

आप या तो ऊपर या नीचे उपयोग कर सकते हैं (चूंकि तत्व को इन दोनों मानों के अनुसार नहीं रखा जा सकता है) और या तो दाएं या बाएं।

यदि कोई तत्व पूर्ण की स्थिति पर सेट होता है, लेकिन वहां कोई गैर स्थैतिक रूप से स्थित पूर्वजों नहीं हैं, तो यह शरीर तत्व के सापेक्ष स्थित होगा, जो पृष्ठ का उच्चतम स्तर तत्व है।

सापेक्ष पोजिशनिंग

हमने पहले ही रिश्तेदार स्थिति का उल्लेख किया है, तो आइए अब उस संपत्ति को देखें।

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

उदाहरण के लिए, यदि आपके पास अपने वेब पेज पर तीन पैराग्राफ हैं, और तीसरे स्थान पर "स्थिति: रिश्तेदार" शैली है, तो इसकी स्थिति इसके वर्तमान स्थान के आधार पर ऑफसेट हो जाएगी।

अनुच्छेद 1।

अनुच्छेद 2।

अनुच्छेद 3।

उपर्युक्त उदाहरण में, तीसरा पैराग्राफ कंटेनर तत्व के बाईं ओर 2em स्थान पर रखा जाएगा, लेकिन फिर भी पहले दो पैराग्राफ से नीचे होगा। यह दस्तावेज़ के सामान्य प्रवाह में रहेगा, और बस थोड़ा ऑफसेट हो जाएगा। यदि आपने इसे स्थिति में बदल दिया है: पूर्ण; इसके बाद कुछ भी इसके शीर्ष पर प्रदर्शित होगा, क्योंकि यह अब दस्तावेज़ के सामान्य प्रवाह में नहीं होगा।

किसी वेब पेज पर तत्वों का उपयोग अक्सर स्थिति का मान सेट करने के लिए किया जाता है: कोई ऑफसेट मान स्थापित नहीं होता है, जिसका अर्थ है कि तत्व सामान्य प्रवाह में दिखाई देगा जहां यह सामान्य प्रवाह में दिखाई देगा। यह पूरी तरह से उस तत्व को एक संदर्भ के रूप में स्थापित करने के लिए किया जाता है जिसके खिलाफ अन्य तत्वों को पूरी तरह से स्थित किया जा सकता है। उदाहरण के लिए, यदि आपके पास "कंटेनर" (जो वेब डिज़ाइन में एक बहुत ही सामान्य परिदृश्य है) के वर्ग मूल्य के साथ आपकी पूरी वेबसाइट के आस-पास एक विभाजन है, तो विभाजन को सापेक्ष की स्थिति में सेट किया जा सकता है ताकि उसके अंदर कुछ भी उपयोग कर सके यह एक स्थिति संदर्भ के रूप में।

फिक्स्ड पोजिशनिंग के बारे में क्या?

फिक्स्ड पोजिशनिंग पूर्ण स्थिति की तरह बहुत है। तत्व की स्थिति को पूर्ण मॉडल के रूप में गणना की जाती है, लेकिन निश्चित स्थान तब उस स्थान पर तय किए जाते हैं- लगभग वॉटरमार्क की तरह। पृष्ठ पर बाकी सब कुछ उस तत्व से पहले स्क्रॉल करेगा।

इस संपत्ति मूल्य का उपयोग करने के लिए, आप सेट करेंगे:

स्थिति: तय;

ध्यान रखें, जब आप अपनी साइट पर किसी तत्व को ठीक करते हैं, तो वह उस स्थान पर प्रिंट करेगा जब आपका वेब पेज मुद्रित होगा। उदाहरण के लिए, यदि आपका तत्व आपके पृष्ठ के शीर्ष पर तय किया गया है, तो यह प्रत्येक मुद्रित पृष्ठ के शीर्ष पर दिखाई देगा - क्योंकि यह पृष्ठ के शीर्ष पर तय है। आप मुद्रित पृष्ठों को निश्चित तत्वों को प्रदर्शित करने के तरीके को बदलने के लिए मीडिया प्रकारों का उपयोग कर सकते हैं:

@media स्क्रीन {एच 1 # पहला {स्थिति: तय; }} @media प्रिंट {एच 1 # पहला {स्थिति: स्थैतिक; }}

जेनिफर क्रिनिन द्वारा मूल लेख। जेरेमी गिरार्ड द्वारा 1/7/16 को संपादित किया गया।