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，使它们不重叠

回答

相关问题