CSS：橫幅和菜單位置

情況簡述：我正在製作一個網站（顯然:)），所以我有我的標題，然後我的橫幅和橫幅下面我有我的菜單欄。然而，橫幅與我的標題重疊了一點（這就是意圖;）），現在我想直接在橫幅下面添加菜單欄。CSS：橫幅和菜單位置

這裏是我的CSS代碼：

.header_container{ 
background-color: #e5e5e5; 
height: 200px; 
overflow: hidden; 
} 

.banner { 
position: relative; 
top: -90px; 
background: url(../images/banner.png) no-repeat top center; 
height: 210px; 
} 

.menu { 
background: url(../images/menubalk.png) no-repeat top center; 

}

的菜單欄在那裏我應該是，如果旗幟不會有重疊的位置。

我剛剛想出了一些小東西，這可能會解決我的整個問題。如果我要將我的標題放在一個框中，然後我的主要內容是一個框（其中包含橫幅，內容和頁腳）並製作所有不同的內容，例如來自該框的橫幅廣告？當我使用繼承或任何函數時，是不是會解決我的整個問題？

預先感謝您！親切的問候，大衛

來源

2013-03-15 David Vandenbroucke

嘗試創建一個複製問題以更好地理解它的小提琴（http://jsfiddle.net）。 – 2013-03-15 11:35:50

已經提出了一種這樣做的方法，使用菜單元素的相對定位。

例如：

<div class="header_container"> 
    Le Header Container 
</div> 
<div class="banner"> 
    Le Banner 
</div> 
<div class="menu"> 
    Le Menu 
</div>

和CSS看起來像：

.header_container{ 
background-color: #e5e5e5; 
height: 200px; 
overflow: hidden; 
} 

.banner { 
background-color: yellow; 
position: relative; 
top: -90px; 
height: 210px; 
} 

.menu { 
background-color: red; 
position: relative; 
top: -90px; 
height: 50px; 
}

作爲開始，這裏是一個小提琴：http://jsfiddle.net/audetwebdesign/9gvTG/

替代方法
你可以通過使用負餘量達到類似效果：

.header_container{ 
background-color: #e5e5e5; 
height: 200px; 
overflow: hidden; 
margin-bottom: -90px; // only need to adjust this property 
} 

.banner { 
background-color: yellow; 
position: relative; 
height: 210px; 
} 

.menu { 
background-color: red; 
position: relative; 
height: 50px; 
}

該方法的優點是，如果更改標題並需要修改標題元素的重疊程度，則後續元素的定位不需要調整。

很好地瞭解這兩種方法。

來源

2013-03-15 11:48:28

你的情況的一個解決方案將您的菜單絕對位置在bottom:-120px。這不是最優雅的，但它應該工作。

來源

2013-03-15 11:28:16

謝謝，但不幸的是問題仍然存在。以下各層現在都處於比他們應該低的位置。所以我猜我必須改變我的.banner中的內容才能解決所有問題。 – 2013-03-15 11:31:18

也取決於你的html。 – 2013-03-15 11:32:34

你應該爲你的菜單指定一個相對位置。隨着最大價值相同的旗幟

.menu { 
    .... 
    .... 
    position: relative; 
    top:-90px; 
    }

您所看到的空間是因爲菜單，在正常文檔流，只是下面的圖標所在的位置定位。

小提琴here

您的圖像，而不是（這是從它的實際位置移90像素時）我使用的背景顏色您可以直接在你的旗幟的底部或在任何你需要的地方菜單。然後記住菜單後面的元素將在他的真實位置看到菜單。在這種情況下90px以下。許多解決方案來包裝所有這個問題，所以不會影響其餘的頁面元素。

來源

2013-03-15 11:35:56 Fico

CSS：橫幅和菜單位置

回答

相關問題