div div अन्य divs को ओवरलैप कैसे करें?

Question

खोज बार के नीचे की सामग्री उपयोगकर्ताओं को कुछ पाठ दर्ज करने के बाद दिखाया जाना है। वर्तमान में शैली उस चीज़ के नीचे है जिसका मैं लक्ष्य रख रहा हूं।

हालांकि जब मैं खोज परिणामों को प्रदर्शित है, यह खोज पट्टी निम्नलिखित कंटेनर, धक्का के रूप में मेरी तस्वीर के रूप में रेखांकित:

मुझे लगता है कि खोज परिणाम प्रदर्शित और बस नीचे सब कुछ ओवरलैप क्या कर सकते हैं बिना अन्य तत्वों को नीचे धक्का दे रहा है?

<div id="search-bar" class="box"> 
    <h1 class="horizontal-header">SEARCH THE DATABASE</h1> 
    <div id="search-wrapper"> 
     <input name="query" id="name" class="big-search" placeholder="champion, item, spells..." /> 
     <div id="search-results"> 
      <a href="#"> 
       <div class="item"> 
        <img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" /> 
        <div class="info"> 
         <p class="name">Jax</p> 
         <p class="description">Champion</p> 
        </div> 
       </div> 
      </a> 
      <a href="#"> 
       <div class="item"> 
        <img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" /> 
        <div class="info"> 
         <p class="name">Jax</p> 
         <p class="description">Champion</p> 
        </div> 
       </div> 
      </a> 
      <a href="#"> 
       <div class="item"> 
        <img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" /> 
        <div class="info"> 
         <p class="name">Jax</p> 
         <p class="description">Champion</p> 
        </div> 
       </div> 
      </a> 
     </div> 
    </div> 
</div> 

और मेरे सीएसएस (कम के साथ लिखा):

#search-bar { 
     width: 636px; 
     height: 35px; 

     #search-wrapper { 
      float:left; 
      margin-left: 13px; 

      #search-results { 
       z-index:999; 
       position:relative; 


       a { 
        display:block; 

        .item:hover { 
         background-color:#282828; 
        } 

        .item { 
         overflow: hidden; 
         background-color: #171717; 
         padding: 2px; 
         cursor:pointer; 
         margin-bottom:1px; 

         img { 
          float: left; 
          width: 35px; 
         } 

         .info { 
          float: left; 
          margin-left: 8px; 

          .name { 
           color: white; 
           margin: 0; 
          } 

          .description { 
           color: white; 
           margin: 0; 
          } 
         } 
        } 
       }     
      } 
     } 
    } 

Answer 1

उपयोग सीएसएस के Absolute Positioning

यहाँ मेरी HTML है। सापेक्ष पोजिशनिंग के विपरीत, पूर्ण पोजीशनिंग आइटम को दस्तावेज़ के प्रवाह से हटा देती है (यानी इसे अन्य चीजों को नीचे धक्का देने से रोकती है।)

बस याद रखें, जो कुछ भी बिल्कुल स्थित है, उसके निकटतम स्थित माता-पिता के सापेक्ष स्थित है - तो जो भी कंटेनर निरपेक्ष तैनात मदों में कर रहे हैं (आपके मामले में) के लिए स्थिति के सभी प्रकार पर position:relative;

जानकारी सेट किया जाना चाहिए: http://www.w3schools.com/css/css_positioning.asp

Answer 2

अपने .item DIV को position:absolute दे। इस तरह लिखें:

.item { 
position:absolute; 
}