位置：固定重叠页面 [英] position: fixed overlapping page

问题描述

这是小提琴。我正在制作杂货清单网络应用程序，并且正在将顶部div设为固定位置。当我这样做时，div似乎与页面的其余部分重叠。我试过在CSS中使用两个位置（ position：relative; position：fixed ），但这不能使div保持固定。

Here is the fiddle. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css (position: relative; position: fixed) but this doesn't let the div stay fixed.

CSS（用于div）：

CSS (for the div):

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

HTML（用于div）：

HTML (for the div):

<div id='top'>Kitchen List</div>

推荐答案

用 div包裹内容并赋予 margin-top 到与固定内容相同的高度。

Wrap your content with div and give it the margin-top to the same height as your fixed content.

在此处查看演示

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

这篇关于位置：固定重叠页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！