¿Cómo hacer que un div se superponga a otros divs?

Question

Los contenidos debajo de la barra de búsqueda deben mostrarse después de que los usuarios ingresen texto. Actualmente, el estilo se reduce a lo que estoy buscando.

Sin embargo, cuando puedo mostrar los resultados de la búsqueda, empuja el recipiente después de la barra de búsqueda, como se ilustra en mi foto:

¿Qué puedo hacer yo que la pantalla de resultados de búsqueda y simplemente se superponen todo por debajo es sin empujando otros elementos hacia abajo?

Aquí es mi 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> 

Y mi CSS (escrita con menos):

#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

uso de CSS Absolute Positioning. A diferencia del posicionamiento relativo, el posicionamiento absoluto elimina el elemento del flujo del documento (es decir, evita que empuje otras cosas hacia abajo).

Solo recuerde, algo que está absolutamente posicionado se coloca en relación con el elemento primario más cercano, por lo que cualquier contenedor absolutas elementos posicionados están en (en su caso) debe estar configurado en position:relative;

información sobre todo tipo de posicionamiento: http://www.w3schools.com/css/css_positioning.asp

Answer 2

Dale position:absolute a su .item DIV. Escribir de esta manera:

.item { 
position:absolute; 
}