css - 位置 : fixed overlapping page

Question

这是 fiddle .我正在制作一个杂货 list 网络应用程序，并将顶部 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;
}