職位：固定重疊頁面

Question

這裏是fiddle。我正在製作一個購物清單網絡應用程序，並且我將頂部div設置爲固定位置。當我這樣做時，div似乎與頁面的其餘部分重疊。我曾嘗試在css中使用兩個位置（position: relative; position: fixed），但這不會讓div保持固定。

CSS（爲DIV）：

#top { 
    width: 100%; 
    height: 40px; 
    background: #96f226; 
    text-align: center; 
    font-size: 30px; 
    color: #252525; 
    position: relative; 
    position: fixed; 
} 

HTML（爲DIV）：

<div id='top'>Kitchen List</div> 

Answer 1

與div包裝你的內容，並給它margin-top到相同的高度，您的固定內容。

SEE DEMO HERE

HTML

<div id='top'>Kitchen List</div> 
<br /> 
<div class="container"> 
    <input type='text' id='input'> 
    <button id='click'>Add</button> 
    <ol></ol> 
    <div id='error'>Please enter a grocery item 
     <br /> 
     <button id='eb'>Close</button> 
    </div> 
</div> 

CSS

.container { 
    margin-top: 50px; 
} 

Answer 2

您需要添加另一個div來包裝用margin-top內容。

DEMO

http://jsfiddle.net/sZaxc/8/

HTML

<div id='main'> 
    <!-- inputs etc --> 
</div> 

CSS

#main { 
    margin-top: 50px; 
} 

我還爲您的#top -div添加了一個z-index和top: 0以防萬一。

Answer 3

這是因爲你有兩個職位。刪除一個，並使它：

#top { 
    width: 100%; 
    height: 40px; 
    background: #96f226; 
    text-align: center; 
    font-size: 30px; 
    color: #252525; 
    position: fixed; 
}