Jak utworzyć nakładkę na inne elementy div?

Question

Zawartość pod paskiem wyszukiwania ma być wyświetlana po wprowadzeniu przez użytkownika tekstu. Obecnie styl zależy od tego, do czego dążę.

Jednak kiedy wyświetlania wyników wyszukiwania, to wypycha pojemnik następujące pasku wyszukiwania, co ilustruje moim zdjęciu:

Co mogę zrobić, aby wyświetlać wyniki wyszukiwania i po prostu pokrywają wszystko poniżej to bez popychając inne elementy w dół?

Tu jest mój 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> 

A mój CSS (napisane MNIEJ):

#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

Zastosowanie CSS na Absolute Positioning. W odróżnieniu od pozycjonowania względnego, pozycjonowanie bezwzględne usuwa element z przepływu dokumentu (tj. Nie dopuszczając do wypychania innych elementów).

Pamiętaj, że coś, co jest pozycjonowane absolutnie, jest pozycjonowane w stosunku do najbliższej pozycji rodzica - więc niezależnie od tego, który kontener bezwzględne rozmieszczone elementy są w (w danym przypadku) powinien być ustawiony na position:relative;

informacji na temat wszystkich rodzajów pozycjonowania: http://www.w3schools.com/css/css_positioning.asp

Answer 2

Give position:absolute do .item DIV. Napisz tak:

.item { 
position:absolute; 
}