位置：固定重叠页面

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

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