爲什麼相對定位導致元素下面的空間？

我有一個div在我的homepage，沒有定位，它擁有主圖像。在這個主要圖像的頂部，我有一個容器可以放置我的搜索欄。我已經定位了這個容器position:relativetop:-500px;，以便它顯示在我的主圖像上。爲什麼相對定位導致元素下面的空間？

我再有另一個2個容器，下次來，但如果我什麼都不做位置上他們，他們出現大的垂直空間後，所以我不得不position:relative，並添加一個減號頂部。我不得不繼續做這個top:-300px或其他什麼，因爲如果我沒有空間出現在下面我不能填充。

現在下一個div下來是我不想要定位，因爲它出現在每一頁上的頁腳。我怎樣才能擺脫我的精選屬性和頁腳之間的空間？

下面的代碼：

//no positioning 
<div style="margin: 0 auto" class="slideshowWrap"> 
    <div class="homeslideshow slide1"> 
    </div> 
    <div class="homeslideshow slide2"> 
    </div> 
    <div class="homeslideshow slide3"> 
    </div> 
</div> 


//position:relative top:-500px 
<div id="homecontainer"> 
</div> 


//position:relative; top:-300px; margin-bottom:-100px; 
<div id="homeBoxContainer"> 
</div> 
<div style="clear:both"></div> 

//position:relative; top:-300px; 
<div id="homeFeaturedContainer"> 
</div>

來源

2013-09-27 Patrick Guinness

我很困惑...你修復所有_blocks_與負邊緣頂'分開你所有的東西。我只知道，這裏真的是你的問題？ – fiskolin

您是否訪問過他的網站？他的頁腳關閉了。 –

你有問題，你設計你的容器的方式。當你使用position：relative和top：-300移動所有東西時，它會將所有東西都移動，但是#content的高度仍然可以節省空間並保持高度。如果你希望你的頁腳鏈接起來，添加以下代碼

#footer { 
top: -300px; 
position: relative; 
}

，因爲你還有你的奇怪的設計創造了大高度不解決您的問題。您需要返回繪圖板並重新設計您的容器。你不需要這個職位：親戚，把所有東西都搬上去。

來源

2013-09-27 15:26:55

我不想在頁腳中添加更多的CSS，因爲它會在每個頁面上顯示，所以會將所有頁面其他頁... –

理想情況下，我只需要第一個容器需要懸停在主圖像位置：絕對，但如果我這樣做，它似乎消失在圖像後面 –

我可以在解決方案中工作，但我只有以後才能做到這一點 –

我一般只在絕對定位的元素設置頂部和底部的值。試試這個：

#homeFeaturedContainer { 
    margin-top: -300px; 
    margin-bottom: -300px; 
}

來源

2013-09-27 15:19:52 isherwood

謝謝，但我試過這個螺絲上面的東西。 :( –

你是什麼瀏覽器？它不會影響Chrome中的任何其他內容。我之前多次使用過這種技術。 – isherwood

爲什麼相對定位導致元素下面的空間？

回答

相關問題