सही फ्लोट और स्थिति पूर्ण काम नहीं करता है एक साथ

Question

मैं एक div अपनी मूल div के दाईं ओर हमेशा होना चाहते हैं, तो मैं float:right का उपयोग करें। यह काम करता हैं।

लेकिन मैं यह भी जब डाला यह अन्य सामग्री को प्रभावित नहीं करना चाहते हैं, तो मैं position:absolute का उपयोग करें।

अब float:right काम नहीं करता है, मेरे div अपनी मूल div के बाईं पर हमेशा होता है। मैं इसे दाईं ओर कैसे ले जा सकता हूं?

Answer 1

उपयोग

position:absolute; right: 0;

इसके अलावा पूर्ण स्थिति के साथ float:right के लिए कोई ज़रूरत नहीं, सुनिश्चित करें कि पेरेंट तत्व position:relative;

Answer 2

पर सेट है शायद आप इस तरह तैरता का उपयोग कर की तरह अपनी सामग्री को विभाजित करना चाहिए बनाने के :

<div style="overflow: auto;"> 
    <div style="float: left; width: 600px;"> 
     Here is my content! 
    </div> 
    <div style="float: right; width: 300px;"> 
     Here is my sidebar! 
    </div> 
</div> 

overflow: auto; पर ध्यान दें, यह सुनिश्चित करने के लिए कि आपके कंटेनर पर कुछ ऊंचाई है। बातें फ्लोटिंग उन्हें डोम से बाहर ले जाता है, यह सुनिश्चित करें कि अपने तत्वों को नीचे अपना भटक तैरता ओवरलैप नहीं, एक कंटेनर div सेट एक overflow: auto (या overflow: hidden) सुनिश्चित करना है कि तैरता जब अपनी ऊंचाई ड्राइंग के लिए जिम्मेदार है की जातीं। फ्लोट्स और here का उपयोग करने के तरीके के बारे में अधिक जानकारी देखें।

Answer 3

आम तौर पर, float एक सापेक्ष स्थिति बयान है, क्योंकि यह अपने मूल कंटेनर (दाएं या बाएं तरफ तैरते हुए) के सापेक्ष तत्व की स्थिति निर्दिष्ट करता है। इसका अर्थ है कि यह position:absolute संपत्ति के साथ असंगत है, क्योंकि position:absolute एक पूर्ण स्थिति निर्धारण कथन है। आप या तो एक तत्व तैर सकते हैं और ब्राउजर को अपने मूल कंटेनर के सापेक्ष स्थिति देने की अनुमति दे सकते हैं, या आप एक पूर्ण स्थिति निर्दिष्ट कर सकते हैं और तत्व को अपने माता-पिता के बावजूद किसी निश्चित स्थिति में प्रकट करने के लिए मजबूर कर सकते हैं। यदि आप स्क्रीन के दाहिने तरफ दिखाई देने के लिए एक पूरी तरह से स्थित तत्व चाहते हैं, तो आप position: absolute; right: 0; का उपयोग कर सकते हैं, लेकिन यह तत्व को स्क्रीन के दाएं किनारे पर हमेशा दिखाई देगा क्योंकि इसके माता-पिता div कितने व्यापक हैं (इसलिए यह "अपने मूल div के दाईं ओर" नहीं होगा ")।

Answer 4

आप उपयोग कर सकते हैं "translateX (-100%)" और "पाठ के अनुरूप: सही" यदि आपका पूर्ण तत्व है "display: inline-ब्लॉक"

<div class="box"> 
<div class="absolute-right"></div> 
</div> 

<style type="text/css"> 
.box{ 
    text-align: right; 
} 
.absolute-right{ 
    display: inline-block; 
    position: absolute; 
} 

/*The magic:*/ 
.absolute-right{ 
-moz-transform: translateX(-100%); 
-ms-transform: translateX(-100%); 
-webkit-transform: translateX(-100%); 
-o-transform: translateX(-100%); 
transform: translateX(-100%); 
} 
</style> 

आप होगा पूर्ण-तत्व सही सापेक्ष अपनी मूल

Answer 5

मैं बिल्कुल घोंसले में से एक परत और एक मुश्किल मार्जिन के साथ एक सही शुरु तत्व की स्थिति में सक्षम था करने के लिए गठबंधन हो:

function test() { 
 
    document.getElementById("box").classList.toggle("hide"); 
 
}

.right { 
 
    float:right; 
 
} 
 
#box { 
 
    position:absolute; background:#feb; 
 
    width:20em; margin-left:-20em; padding:1ex; 
 
} 
 
#box.hide { 
 
    display:none; 
 
}

<div> 
 
    <div class="right"> 
 
    <button onclick="test()">box</button> 
 
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
     sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
 
     nisi ut aliquip ex ea commodo consequat. 
 
    </div> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
 
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
 
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
 
    nisi ut aliquip ex ea commodo consequat. 
 
    </p> 
 
</div>

मैं इस toggleable बनाने के लिए ताकि आप देख सकते हैं कि यह आसपास के पाठ के प्रवाह को प्रभावित नहीं करता है (इसे चलाने और दिखाने/करने के लिए बटन दबाएँ जारी पूर्ण बॉक्स छुपा) का फैसला किया ।