पेज सामग्री के ऊपर एक div फ्लोट करें

Question 1

मैंने एक पॉपअप बॉक्स लागू किया है जो गतिशील रूप से खोज विकल्प प्रदर्शित करता है। मैं साइट सामग्री के ऊपर "फ्लोट" के लिए बॉक्स चाहता हूं। वर्तमान में, जब बॉक्स प्रदर्शित होता है, तो यह नीचे दी गई सभी सामग्री को विस्थापित कर देता है और खराब दिखता है।

मेरा मानना है कि मैंने पहले ही शेष पेज की सामग्री के ऊपर बॉक्स के div के z-index को सेट करने की कोशिश की है, लेकिन फिर भी कोई भाग्य नहीं है।

Question 2

आप पूर्ण स्थिति का उपयोग करना चाहते हैं ।

एक पूर्ण स्थिति तत्व पहले मूल तत्व के सापेक्ष स्थित होता है जिसमें स्थैतिक के अलावा कोई अन्य स्थिति होती है। यदि ऐसा कोई तत्व नहीं मिला है, तो युक्त ब्लॉक html है

उदाहरण के लिए :

.yourDiv{
  position:absolute;
  top: 123px;
}

इसे काम पर लाने के लिए, माता-पिता को रिश्तेदार होना चाहिए ( position:relative)

आपके मामले में यह करना चाहिए:

.suggestionsBox{position:absolute; top:40px;}
#specific_locations_add{position:relative;}

Question 3

उपयोग

position: absolute;
top: ...px;
left: ...px;

Div स्थिति के लिए। सुनिश्चित करें कि उसके पास स्थिति के साथ माता-पिता का टैग नहीं है: रिश्तेदार;

Question 4

देना z-index:-1फ्लैश और देने के लिए z-index:100div करने के लिए ..

Question 5

हां, जेड-इंडेक्स जितना अधिक होगा, उतना बेहतर होगा। यह पृष्ठ पर आपके सामग्री तत्व को हर दूसरे तत्व के शीर्ष पर रखेगा। मान लें कि आपके पृष्ठ पर कुछ तत्वों के लिए z-index है। उच्चतम के लिए देखें और फिर अपने पॉपअप तत्व को एक उच्च जेड-इंडेक्स दें। इस तरह यह z- इंडेक्स के साथ अन्य तत्वों पर भी प्रवाहित होगा। यदि आपके पृष्ठ पर किसी भी तत्व में z-index नहीं है, तो आपको z-index: 2 देना चाहिए; या कुछ अधिक।

Question 6

परिणाम कंटेनर div का position: relativeअर्थ है कि यह अभी भी दस्तावेज़ प्रवाह में है और इसके चारों ओर तत्वों के लेआउट को बदल देगा। आपको position: absoluteएक 'फ़्लोटिंग' प्रभाव प्राप्त करने के लिए उपयोग करने की आवश्यकता है ।

आपको अपने द्वारा उपयोग किए जा रहे मार्कअप की भी जांच करनी चाहिए, आपके पास <li>कोई कंटेनर नहीं है <ul>, आप संभवतः दोनों को एक के साथ बदल सकते हैं div#suggestionsऔर वांछित परिणाम प्राप्त कर सकते हैं।div#autoSuggestionsList<ul>

Question 7

नीचे दिया गया कोड काम कर रहा है,

<style>
    .PanelFloat {
        position: fixed;
        overflow: hidden;
        z-index: 2400;
        opacity: 0.70;
        right: 30px;
        top: 0px !important;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -ms-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
    }
</style>

<script>
 //The below script will keep the panel float on normal state
 $(function () {
        $(document).on('scroll', function () {
            //Multiplication value shall be changed based on user window
            $('#MyFloatPanel').css('top', 4 * ($(window).scrollTop() / 5));
        });
    });
 //To make the panel float over a bootstrap model which has z-index: 2300, so i specified custom value as 2400
 $(document).on('click', '.btnSearchView', function () {
      $('#MyFloatPanel').addClass('PanelFloat');
  });

  $(document).on('click', '.btnSearchClose', function () {
      $('#MyFloatPanel').removeClass('PanelFloat');
  });
 </script>

 <div class="col-lg-12 col-md-12">
   <div class="col-lg-8 col-md-8" >
    //My scrollable content is here
   </div>
   //This below panel will float while scrolling the above div content
   <div class="col-lg-4 col-md-4" id="MyFloatPanel">
    <div class="row">
     <div class="panel panel-default">
      <div class="panel-heading">Panel Head </div>
     <div class="panel-body ">//Your panel content</div>
   </div>
  </div>
 </div>
</div>