पूर्ण स्थिति के साथ दाईं ओर एक div को कैसे रखें

मेरे पास एक पृष्ठ है जहां वास्तविक पृष्ठ को परेशान किए बिना गतिशील संदेश बॉक्स प्रदर्शित किया जाना है। इस संदेश बॉक्स को मौजूदा सामग्री को ओवरलैप करने वाले पृष्ठ के ऊपरी दाएं कोने में दिखाना है।पूर्ण स्थिति के साथ दाईं ओर एक div को कैसे रखें

मैंने position: absolute का उपयोग करने का प्रयास किया है, लेकिन फिर मैं इसे दाएं कोने में रखने में असमर्थ हूं। इसके अलावा मैं left का उपयोग करने में असमर्थ हूं क्योंकि मुझे बूटस्ट्रैप से उत्तरदायी डिज़ाइन का समर्थन करना है।

यहां नमूने मार्कअप

<html> 
    <body> 
     <div class="container"> 
      <!-- Need to place this div at the top right of the page--> 
      <div class="ajax-message"> 
       <div class="row"> 
        <div class="span9"> 
         <div class="alert"> 
          <a class="close icon icon-remove"></a> 
          <div class="message-content"> 
           Some message goes here 
          </div> 
         </div> 
        </div> 
       </div> 
      </div> 
      <!-- Page contents starts here. These are dynamic--> 
      <div class="row"> 
       <div class="span12 inner-col"> 
        <h2>Documents</h2> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

यह संदेश बॉक्स .container के संबंध में और संदेश बॉक्स के बाईं ओर के साथ 50% की चौड़ाई होना चाहिए यह ओवरलैप हो नहीं किया जाना चाहिए है। यानी हम बाईं तरफ की सामग्री को क्लिक/चुनने में सक्षम होना चाहिए।

कृपया नमूना here खोजें।

कृपया इस समस्या को हल करने में मेरी मदद करें।

स्रोत

2012-03-16 Arun P Johny

http://stackoverflow.com/questions/11333624/css-float-right-and-position-absolute-doesnt-work-together – Nick

yourbox{ 
    position:absolute; 
    right:<x>px; 
    top :<x>px; 
}

इसे दाएं कोने में स्थित करता है। ध्यान दें, यह स्थिति पहले पूर्वज-तत्व पर निर्भर है जो static स्थित नहीं है!

संपादित करें:

I updated your fiddle।

स्रोत

2012-03-16 10:26:44 Christoph

आप निम्नलिखित की कोशिश कर सकते हैं:

float: right;

स्रोत

2012-03-16 10:27:39 Molske

मैं यह सोचते हैं रहा है कि अपने कंटेनर तत्व शायद position:relative; है। इसका मतलब यह होगा कि संवाद बॉक्स कंटेनर के अनुसार, पृष्ठ पर नहीं रखा जाएगा।

क्या आप इस पर मार्कअप बदल सकते हैं?

<html> 
<body> 
    <!-- Need to place this div at the top right of the page--> 
     <div class="ajax-message"> 
      <div class="row"> 
       <div class="span9"> 
        <div class="alert"> 
         <a class="close icon icon-remove"></a> 
         <div class="message-content"> 
          Some message goes here 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    <div class="container"> 
     <!-- Page contents starts here. These are dynamic--> 
     <div class="row"> 
      <div class="span12 inner-col"> 
       <h2>Documents</h2> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

मुख्य कंटेनर के बाहर संवाद बॉक्स के साथ आप पृष्ठ के सापेक्ष पूर्ण स्थिति का उपयोग कर सकते हैं।

स्रोत

2012-03-16 10:34:24

yourbox { 
    position: absolute; 
    left: 100%; 
    top: 0; 
}

शेष: 100%; यहां महत्वपूर्ण मुद्दा है!

स्रोत

2013-12-15 10:55:45

'छोड़ दिया : 100% 'खिड़की के दाएं किनारे पर div के बाईं किनारे रखता है, इसलिए शेष div छुपा हुआ है। 'बाएं: 94%' मेरे लिए काम किया। महान समाधान, धन्यवाद। – gibberish

आप उपयोग कर सकते हैं "translateX"

<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>

स्रोत

2016-04-15 16:50:22

पूर्ण स्थिति के साथ दाईं ओर एक div को कैसे रखें

उत्तर

संबंधित मुद्दे