固定定位重叠页面

Question

这里是代码片段。我正在开发一个杂货清单的web应用，我想把顶部div设为固定位置。但是，这样做会导致该div与页面的其他部分重叠。我尝试在CSS中使用两个不同的position属性(position: relative; position: fixed)，但这并不能使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>

- Joe Pigott

---

像这样吗？http://jsfiddle.net/sZaxc/7/ - Vikas Ghodke

是的...非常像那样。 - Joe Pigott

好的，我已经在下面发布了答案，请接受它。 - Vikas Ghodke

好的，我可以在5分钟内接受。 - Joe Pigott

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

- Vikas Ghodke

---

只有在使用Opera浏览器（Web Kit）打印第一页时才有效。 - Paul

Answer 2

您需要添加另一个

标签来包裹内容，并使用margin-top属性。

演示

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

HTML代码

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

CSS

#main {
    margin-top: 50px;
}

为了保险起见，我还给你的#top区域添加了z-index和top: 0属性。

- Mr. B.

Answer 3

这是因为您有两个位置。移除一个并将其修改为：

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

- SaturnsEye

---

错误！最后一个位置将覆盖所有先前定义的位置值！因此，您所做的与问题中的代码完全相同。 - Asqan