Wie man ein div mit anderen divs überlappt?

Question

Der Inhalt unterhalb der Suchleiste soll angezeigt werden, nachdem der Benutzer einen Text eingegeben hat. Momentan ist der Stil darauf ausgerichtet, was ich anstrebe.

Allerdings, wenn ich die Suchergebnisse angezeigt werden, drückt er den Behälter nach der Suchleiste, wie mein Bild dargestellt:

Was kann ich tun, dass die Suchergebnisse angezeigt und überlappen sich nur alles unter es ohne andere Elemente nach unten schieben?

Hier ist mein HTML:

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

Und mein CSS (mit LESS geschrieben):

#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

Verwenden CSS des Absolute Positioning. Im Gegensatz zur relativen Positionierung entfernt die absolute Positionierung den Gegenstand aus dem Fluss des Dokuments (dh verhindert, dass andere Dinge nach unten gedrückt werden.)

Denken Sie daran, dass etwas, das absolut positioniert ist, relativ zu seinem nächstliegenden Elternteil positioniert ist - also welcher Behälter auch immer absolute positioniert Artikel sind in (in Ihrem Fall) sollte position:relative;

Info auf allen Arten der Positionierung gesetzt werden: http://www.w3schools.com/css/css_positioning.asp

Answer 2

geben position:absolute auf Ihre .item DIV. Schreiben Sie so:

.item { 
position:absolute; 
}