位置:固定重叠页面

Question

这是小提琴.我正在制作一个购物清单网络应用程序,我正在使顶级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固定内容保持相同的高度.

在这里看到演示

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;
}