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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

परिच्छेद 1।

अनुच्छेद 2।

अनुच्छेद 3।

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

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

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

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

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

स्थिति: तय;

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

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