Stapeln divs, so dass sie sich nicht überlappen

Question

So habe ich ein div in der Mitte der Seite zentriert, die eine Schaltfläche und ein Suchfeld ist, und ein anderes darunter, wo die Ergebnisse der Suche angezeigt werden sollen. Alles funktioniert gut, außer dass die Suchergebnisse hinter dem zentrierten div erscheinen.

Ich möchte, dass sie beide gestapelt werden, so dass, wenn die Ergebnisse angezeigt werden, die obere Div nach oben bewegt, um Platz zu machen. Irgendwelche Tipps?

Here's the jsfiddle.

HTML

<div class="container-fluid"> 


     <div class="row"> 
      <h4 class="title">Wikipedia Viewer</h4> 
      <h4 class="port">by l-emi</h4> 
     </div> 

     <div id="aligner"> 
     <div class="row"> 

       <div id="centbox"> 
        <div class="row"> 
         <button type="button" class="butoni" id="randy">Random article</button> 
        <input type="text" name="search" placeholder="Or search!" class="butoni" id="searchy"> 
        </div> 
       </div> 


     </div> 

      <div id="resultati"> 
       <ul id="output"> 

       </ul> 
      </div> 
     </div> 

</div> 

CSS für die Top-div:

#centbox { 
    overflow: auto; 
    position: fixed; 
    display: inline-block; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    z-index: 1; 
    display: table; 
    text-align: center; 
} 

Für den Bereich Ergebnisse

#resultati { 
    background-color: #e3e1df; 
    padding: 5px; 
    margin-top: 3.5em; 
    width: 50%; 
    position: fixed; 
    display: inline-block; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

BEARBEITEN

Fehler behoben! Geändert position: fixed; zu position: absolute; für beide, dann verwendet $('#centbox').css("top", "14%"); für den oberen div, und $('#resultati').css("top", "16%"); für die Ergebnisse div.

Updated jsfiddle.

Vielen Dank!

Answer 1

Ich schlage vor, diese zu nutzen:

document.getElementById("centbox").style.top = "28%"; 

Answer 2

starten:

#output { 
    position:absolute; 
    background-color: #e3e1df; 
    width:100%; 
    margin-left: -5px; 
} 

Answer 3

nach dem Ausgang prepend, können Sie die Top-Positionierung neu schreiben, es nach oben zu schieben:

$('#centbox').css("top", "25%"); 

Answer 4

Sie benötigen keine feste Position. Ich empfehle Ihnen, die Box mit Schaltflächen und Ergebnissen vertikal auszurichten.

Wenn Sie keine Ergebnisse erhalten, wird die Box mit den Schaltflächen in der Mitte sein; Mit nur einem Ergebnis befinden sich die Schaltflächen immer noch in der Mitte und Sie haben immer noch das Ergebnis, das Sie benötigen (weniger sichtbare leere Seite).