निरपेक्ष बनाम सम्बन्धी - सीएसएस पोजीनिंग समझाई

सीएसएस पोजीनिंग सिर्फ एक्स, वाई निर्देशांक भन्दा बढी छ

सीएसएस पोजिटिङ लामो समयदेखि वेबसाइट लेआउटहरू सिर्जना गर्ने महत्त्वपूर्ण भाग भएको छ। यहां सम्म कि Flexbox र CSS ग्रिड जस्तै नयाँ सीएसएस लेआउट प्रविधी को उदय संग पनि, स्थिति को अझै पनि कुनै पनि वेब डिजाईजर को बैग को चाल मा एक महत्वपूर्ण स्थान छ।

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

जबकि निरपेक्ष र सापेक्ष दुई सीएसएस पोष्ट विशेषताहरू हो जुन प्राय: वेब डिजाइनमा प्रयोग गरिन्छ, वास्तवमा त्यहाँ स्थिति गुणमा चार राज्य छन्:

• स्थिर
• पूर्ण
• सापेक्ष
• तय भयो

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

यदि तपाइँ स्थिर स्थितिमा माथिको वा बायाँ जस्तै पोर्टेजिङ् नियमहरू लागू गर्नुहुन्छ भने, ती नियमहरू उपेक्षा गरिनेछ र तत्व सामान्य रहनेछ जहाँ यो सामान्य दस्तावेज प्रवाहमा देखिन्छ। सच्चैमा, तपाईं शायद नै कम हुनेछ, यदि सधैँ, सीएसएसमा स्थिर स्थितिमा एक तत्व सेट गर्नु पर्छ किनभने यो डिफल्ट मान हो।

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

निरपेक्ष स्थिति हो सम्भवतः सबै भन्दा राम्रो सीएसएस स्थिति हो। तपाईं यो सीएसएस स्थिति गुणको साथ सुरू गर्नुहोस्:

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

यो मानले ब्राउजरलाई बताउँछ जुन जोस गरिएको छ जुन कागजातको सामान्य प्रवाहबाट हटाइनेछ र यसको सट्टा पृष्ठमा सही स्थानमा राखिएको छ। यो गणना गरिन्छ कि तत्वको नजिकको गैर-स्थिर रूपमा पोषित पूर्वको आधारमा।

किनभने एक पूर्ण स्थितिमा राखिएको तत्व दस्तावेजको सामान्य प्रवाहबाट बाहिरिएको छ किनभने, यसले एचटीएमएलमा यो भन्दा अघि वा पछि तत्त्वहरू वेब पृष्ठमा पोषित भएका छन् भनेर असर गर्दैन।

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

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

यो बिल्कुल स्थितिमा तत्त्व तत्वले अपेक्षाकृत पित्त विभाजनको शीर्षबाट 50 पिक्सेलको प्रदर्शन गर्दछ - कुनै पनि कुरा सामान्य प्रवाहमा अरू के हुन्छ। तपाईंको "बिल्कुल" पोष्ट गरिएको तत्वले यसको सन्दर्भमा अपेक्षाकृत पोषित एक प्रयोग गरेको छ र तपाईले प्रयोग गर्नु भएको सकारात्मक मूल्य भनेको यो हो।

तपाईंले उपयोग गर्नका लागि चार पोष्ट विशेषताहरू निम्न हुन्:

• माथि
• दायाँ
• तल
• बायाँ

तपाईं माथि वा तल प्रयोग गर्न सक्नुहुनेछ (किनकि एक तत्वले यी मानहरूको अनुसार स्थितिमा राख्न सकिँदैन) र बायाँ वा बायाँ।

यदि एक तत्त्व निरपेक्ष स्थितिमा सेट गरिएको छ भने, तर यसको कुनै गैर-स्थिर स्थितिमा पूर्वनिर्धारित पुर्खाहरू छैनन्, त्यसपछि यो शरीर तत्वको साधनमा राखिएको छ, जुन पृष्ठको उच्चतम तह तत्व हो।

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

हामीले पहिले नै रिजर्भेसन स्थितिको उल्लेख गर्यौं, त्यसैले अब त्यो गुणलाई हेरौं।

सापेक्ष पोषणले समान चार स्थितिको रूपमा समान स्थितिको रूपमा प्रयोग गर्दछ, तर यसको नजिकको गैर-स्थिर स्थितिमा राखिएको पूर्वस्वास्थ्यको आधारमा, यो तत्व कहाँ हुन्छ यदि यो अझै सामान्य प्रवाहमा भएको थियो।

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

अनुच्छेद 1।

अनुच्छेद 2।

अनुच्छेद 3।

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

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

फिक्स्ड पोष्टेशनको बारेमा के?

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

यस गुणको मूल्य प्रयोग गर्न, तपाइँ सेट गर्नुहुनेछ:

स्थिति: निश्चित;

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

@media स्क्रीन {h1 # पहिलो {स्थिति: निश्चित; }} @media प्रिंट {h1 # पहिलो {स्थिति: स्थिर; }}

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