सीएसएस स्थिति संपत्ति के साथ एक वेबपेज पर पोजिशनिंग तत्व

मई 8, 2024

कैस्केडिंग स्टाइल शीट्स से पहले, आप अपने वेबपेज पर वस्तुओं की स्थिति पर नियंत्रण में सीमित थे। आप स्थिति को थोड़ा नियंत्रित करने के लिए HTML तालिका का उपयोग कर सकते हैं लेकिन यह बहुत सटीक नहीं था। अब CSS के साथ, आप सटीक नियंत्रण रख सकते हैं कि प्रत्येक तत्व आपके वेबपेज पर कैसे हो।

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

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

अब जब आप उन सीमाओं के लिए शर्तें जानते हैं, जिनमें आप CSS का उपयोग करके अपने वेबपेज के हिस्सों को स्थान दे सकते हैं, तो आइए चार स्थिति मानों पर एक नज़र डालते हैं।

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

वीडियो निर्देश: एचटीएमएल में & amp; सीएसएस क्रैश कोर्स ट्यूटोरियल # 8 - सीएसएस लेआउट में & amp; स्थान (मई 2024).

एक वेबपेज पर सीएसएस की स्थिति के साथ तत्वों की स्थिति

पिछला लेख

अगला लेख

कोलंबस दिवस क्लिप आर्ट

मई 2024

"चौदह सौ निन्यानबे में, कोलंबस ने समुद्र को नीला कर दिया।" कोलंबस दिवस क्लिप आर्ट की खोज में? खैर, आगे नहीं देखो! हमने पूरी कविता की एक प्रति भी शामिल की है। क्रिस्टोफर कोलंबस क्लिप आर्ट कोच...

कंप्यूटर

एक लिफाफा फ्लैश ActionScript 3 खोलना

मई 2024

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