粘性菜單下的CSS3定位

Question

我想讓我的菜單卡在頁面的頂部，所以我使用position: fixed，但我對菜單下面的內容有問題 - 我無法定位它。例如margin-top不起作用，我不明白爲什麼會這樣。
這裏是JSFiddle。

Answer 1

你必須給菜單ID的top和left

#menu{ 
    position:fixed; 
    top:0; 
    left:0; 
    width:100%; 
    height:50px; 
} 

編輯： 它的東西做的內容標籤

https://jsfiddle.net/wgg9bkmr/2/

Answer 2

給菜單的0頂部位置

#menu{ 
    top:0; 
} 

#content{ 
    margin-top: 50px; 
} 

並將風格/定位應用到您的內容div與一個id或類。我使用過id，因爲這是您選擇的內容，但現在認爲最好的做法是使用所有樣式的類。保留JavaScript鉤子的ID使用。

這是你的解決辦法：https://jsfiddle.net/8gjfLe5d/2/

Answer 3

以及你有一對夫婦的問題，在你的代碼中，首先作爲@mgiesa說你必須把

top:0; 

的另一個問題是內容是不是一個有效標籤，因此它不具有由用戶代理自動添加的dafualt定位和顯示屬性。

如果你使用。內容爲一類，你應該沒有問題，這表現在這個fiddle