HTML5 और CSS3 प्रोग्रामिंग के लिए एब्सोल्यूट पोजिशनिंग का उपयोग कैसे करें

एंडी हैरिस द्वारा

आइए डिफ़ॉल्ट लेआउट तंत्र पर विचार करके पूर्ण स्थिति निर्धारण साहसिक कार्य शुरू करें। यहां, आप एक HTML5 पेज देख सकते हैं जिस पर दो पैराग्राफ हैं। आप प्रत्येक पैराग्राफ को एक अलग रंग देने और एक विशिष्ट ऊंचाई और चौड़ाई निर्धारित करने के लिए सीएसएस का उपयोग कर सकते हैं। स्थिति को डिफ़ॉल्ट लेआउट प्रबंधक पर छोड़ दिया जाता है, जो दूसरे (काला) पैराग्राफ को सीधे पहले (नीला) के नीचे रखता है।



प्रोमेथ कोडीन साइड इफेक्ट

छवि0.jpg



HTML कैसे सेट करें

कोड आश्चर्यजनक नहीं है:

 boxes.html 

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



स्थिति दिशानिर्देश कैसे जोड़ें

कुछ नया देखें: पैराग्राफ अतिव्यापी हैं!

image1.jpg

यह उपलब्धि कुछ नई CSS विशेषताओं के माध्यम से हासिल की गई है:



 absPosition.html 

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

एब्सोल्यूट पोजिशनिंग को कैसे काम करें

CSS के कुछ नए हिस्से इन तत्वों के आकार और स्थिति के अधिक प्रत्यक्ष नियंत्रण की अनुमति देते हैं। यहाँ एक बॉक्स के लिए CSS है:

 #blueBox { background-color: blue; width: 100px; height: 100px; position: absolute; left: 0px; top: 0px; margin: 0px; }
  1. ठीकपदकी वजह सेपूर्ण.

    निरपेक्ष स्थिति का उपयोग यह निर्धारित करने के लिए किया जा सकता है कि तत्व को स्क्रीन पर कहाँ रखा जाएगा (अधिक या कम):

     position: absolute;
  2. निर्दिष्ट करेंबाएंसीएसएस में स्थिति।

    आपके द्वारा यह निर्धारित करने के बाद कि एक तत्व होगापूर्णस्थिति, इसे सामान्य प्रवाह से हटा दिया गया है, इसलिए आप इसकी स्थिति को ठीक करने के लिए बाध्य हैं।बाएंविशेषता निर्धारित करती है कि तत्व का बायाँ किनारा कहाँ जाएगा। इसे किसी भी माप इकाई के साथ निर्दिष्ट किया जा सकता है, लेकिन इसे आमतौर पर पिक्सेल में मापा जाता है:

     left: 0px;
  3. निर्दिष्ट करेंऊपरसीएसएस के साथ स्थिति।

    विशेषता इंगित करती है कि तत्व का शीर्ष कहाँ जाएगा। फिर, यह आमतौर पर पिक्सेल में निर्दिष्ट होता है:

     top: 0px;
  4. उपयोगऊंचाईतथाचौड़ाईआकार निर्धारित करने के लिए गुण।

    आम तौर पर, जब आप कोई स्थिति निर्दिष्ट करते हैं, तो आप आकार भी निर्धारित करना चाहते हैं:

    पॉलीमीक्सिन बी सल्फेट और ट्राइमेथोप्रिम
     width: 100px; height: 100px;
  5. मार्जिन को 0 पर सेट करें।

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

     margin: 0px;

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

दिलचस्प लेख