फ्लोट राइट और एब्सोल्यूट पोजिशनिंग क्वॉन्डरी को हल किया गया

एक ऐसे डिव की खोज में जो सहजता से खुद को अपने मूल के दाईं ओर संरेखित करता है और साथ ही साथ टालता है अन्य सामग्री में व्यवधान, आप एक अवरोध पर आ गए हैं: फ्लोट: राइट और का परस्पर विरोधी व्यवहार स्थिति:निरपेक्ष।

फ्लोट और निरपेक्ष की परस्पर विरोधी प्रकृति

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

जब आप फ्लोट: दाएं को स्थिति: पूर्ण के साथ जोड़ते हैं, तो पूर्ण पोजिशनिंग को प्राथमिकता दी जाती है, जिससे तत्व अपनी फ्लोट स्थिति को नजरअंदाज कर देता है और मनमाने ढंग से खुद को संरेखित करता है।

समाधान करना दुविधा

यह सुनिश्चित करने के लिए कि डिव दाईं ओर संरेखित रहे, हम फ्लोट:राइट को हटाते समय पूर्ण स्थिति गुणों का लाभ उठा सकते हैं। निम्नलिखित सीएसएस कोड इसे प्राप्त करता है:

position: absolute;
right: 0;

यह कोड डिव को पूरी तरह से स्थित करता है, इसके दाहिने किनारे को 0 के मान के साथ मूल कंटेनर के दाईं ओर रखता है।

अतिरिक्त टिप

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