Question

这是fiddle。我正在制作一个购物清单网络应用程序，我正在使顶级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;
}

Answer 2

您需要添加另一个div以使用margin-top包装内容。

<强>样本

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

<强> HTML

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

<强> CSS

#main {
    margin-top: 50px;
}

我还在z-index - div中添加了top: 0和#top，以防万一。

Answer 3

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

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

位置：固定重叠页面

3 个答案: