css - 位置：固定重叠页面

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.

演示

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

HTML

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

CSS

#main {
    margin-top: 50px;
}

我还在你的-div 中添加了一个z-indexand - 以防万一。top: 0#top

Answer 3

这是因为你有两个职位。删除一个并制作它：

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