CSS定位

Question

我有一個像

<div id="top" style="height: 50px"></div> 
<div id="bottom" style="height: 50px"></div> 
<div id="content">Here goes some text</div> 

我想中間的div（#bottom網頁）一些HTML代碼將被定位在DIV（#top返回）的頂部，而這樣做，＃內容DIV應該自動向上移動50px。

如果像

<div id="bottom" style="height: 50px; position: relative; top: -50px;"></div> 

的#bottom網頁的div我代碼做向上移動，但＃內容股利留下的..離開之間的差距50像素。

那麼我該如何定位？

Answer 1

如果我的理解正確，你想採取#bottom並將其從常規頁面流中刪除，將其置於#top之上。

兩種方法採取一個元素了正常的網頁流量是position:float;和position:absolute;

不知道你的頁面的其餘部分看起來像我建議是這樣的：

<div id='container' style='position:relative'> 
    <div id="top" style="height: 50px"></div> 
    <div id="bottom" style="height: 50px; position:absolute; top:0em; left:0em;"></div> 
    <div id="content">Here goes some text</div> 
</div> 

，將放在#bottom在頂部，#container的左上角，這也是#top所在的位置。作爲常規頁面流的一部分的#container將在#top的正下方。

對於中心絕對定位的元素，你可以這樣做：

<div style="display:table; margin: 0 auto;"> <!-- display:table; to 'shrink-wrap' the div - margin: 0 auto; to center it-> 
    <div style="position: relative; float:left;"> <!-- float also shrink-wraps --> 
     <div id='top'>top div content</div> 
     <div id='bottom' style="position:absolute; top:0em; width:100%; text-align:center;"> content of bottom div </div> 
     <div id='content'></div> 
    </div> 
</div>