एब्सोल्यूट पोजिशनिंग के भीतर एब्सोल्यूट पोजिशनिंग

वेब पेज लेआउट के साथ काम करते समय, तत्वों को सटीक रूप से व्यवस्थित करने के लिए एब्सोल्यूट पोजिशनिंग जैसी पोजिशनिंग तकनीकों का उपयोग करना आम बात है। एक पेज. हालाँकि, एक संभावित समस्या तब उत्पन्न होती है जब आप किसी ऐसे तत्व के भीतर पूर्ण स्थिति लागू करने का प्रयास करते हैं जो स्वयं बिल्कुल स्थित है।

मान लीजिए कि आपके पास सापेक्ष स्थिति (स्थिति: सापेक्ष) के साथ एक कंटेनर तत्व (प्रथम div) है, जो आपको बाल तत्वों को अपनी स्थिति के सापेक्ष स्थित करना। इस कंटेनर के भीतर, आपके पास एक बिल्कुल स्थित तत्व (दूसरा डिव) और दूसरे डिव के भीतर एक तीसरा बिल्कुल स्थित तत्व (तीसरा डिव) है।

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

पोजिशनिंग पदानुक्रम को समझना

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

इसका मतलब है कि तीसरे डिव की पूर्ण स्थिति की गणना दूसरे डिव के सापेक्ष की जाती है। div की स्थिति, प्रथम div की स्थिति नहीं। परिणामस्वरूप, तीसरा डिव बिल्कुल दूसरे डिव के भीतर स्थित दिखाई देगा, पहले डिव के नहीं।

वैकल्पिक पोजिशनिंग तकनीक

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

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