使用relative排版時空出來的區塊

當使用relative作位移的時候，原來的所佔的區塊並不會消失
因此會造成很大一塊空位在那邊

簡單舉個例子


css
div{ height:500px;width:400px; position:relative}
#one{ background-color:#9FF}
#two{ background-color:#F66}

html
<div id="one"></div>
<div id="two"></div>

此時沒有任何位移，因此看起來很平常

但是加了位移以後呢?
在此我把下方的區塊移到右方並排

css
div{ height:500px;width:400px; position:relative}
#one{ background-color:#9FF}
#two{ background-color:#F66;top:-500px; left:400px}

html
<div id="one"></div>
<div id="two"></div>


如上所示，雖然下方區塊移到左邊了
但是，原來位置那一塊並沒有因此往上縮，造成下方平白無故多了500px的空白區域

有個解決的方法對付這種情況
就是在用一個div去包住他，並且鎖定位移後的長寬並設定overflow為hidden

css
div{ height:500px;width:400px; position:relative}
#one{ background-color:#9FF}
#two{ background-color:#F66; top:-500px; left:400px}
#displayBlock{ height:500px; width:800px; overflow:hidden}


html
<div id="displayBlock">
<div id="one"></div>
<div id="two"></div>
</div>
如此一來，就可以解決多出來的區塊問題
結果如下，下方多出的500px已經消失了