2016-08-12 53 views
0

所以我有一个中心在页面中间的div,它是一个按钮和一个搜索框,另一个在搜索结果应该显示的地方。一切正常,除了搜索结果出现在居中的div之后。Stacking divs,使它们不重叠

我希望它们都被堆叠起来,以便当结果显示顶部div向上移动以腾出空间时。有小费吗?

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的顶格:

#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

谢谢大家!

+0

你应该重做你的设计。您不能在位置固定的情况下进行交互。 –

回答

0

我建议使用:

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

试试这个:

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

这可以阻止它们重叠,但不会沿页面移动它们。 –

1

你的输出前插后,你可以重写顶部定位,将其推到顶端:

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

这工作,我对输出框做了同样的事情,所以他们都上移。谢谢!我想我的下一个问题是,我如何才能让页面滚动以便结果不被切断? –

+0

但是,在2-3次搜索后,结果会在按钮后面,而不是在它们下面。 –

0

你不需要固定位置。我建议你垂直对齐按钮和结果框。

如果你没有给出结果,带按钮的方框将在中间;只是结果,按钮将仍然在中间,你仍然会得到你需要的结果(不太明显的空白页)。