Stacking divs，使它們不重疊

所以我有一箇中心在頁面中間的div，它是一個按鈕和一個搜索框，另一個在搜索結果應該顯示的地方。一切正常，除了搜索結果出現在居中的div之後。Stacking divs，使它們不重疊

我希望它們都被堆疊起來，以便當結果顯示頂部div向上移動以騰出空間時。有小費嗎？

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的頂格：

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

對於結果區域

#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%); 
}

編輯

修好了！更改position: fixed;爲position: absolute;爲他們兩個，然後使用$('#centbox').css("top", "14%");爲頂部股利和$('#resultati').css("top", "16%");爲結果股利。

Updated jsfiddle。

謝謝大家！

來源

2016-08-12 l-emi

你應該重做你的設計。您不能在位置固定的情況下進行交互。 –

我建議使用：

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

來源

2016-08-12 11:22:43

試試這個：

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

來源

2016-08-12 11:25:11

這可以阻止它們重疊，但不會沿頁面移動它們。 –

你的輸出前插後，你可以重寫頂部定位，將其推到頂端：

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

來源

2016-08-12 11:27:44 andreas

這工作，我對輸出框做了同樣的事情，所以他們都上移。謝謝！我想我的下一個問題是，我如何才能讓頁面滾動以便結果不被切斷？ –

但是，在2-3次搜索後，結果會在按鈕後面，而不是在它們下面。 –

你不需要固定位置。我建議你垂直對齊按鈕和結果框。

如果你沒有給出結果，帶按鈕的方框將在中間;只是結果，按鈕將仍然在中間，你仍然會得到你需要的結果（不太明顯的空白頁）。

來源

2016-08-12 11:44:11

Stacking divs，使它們不重疊

回答

相關問題