css - 位置: 重複ページを修正

Question

これがフィドルです。私は食料品リストの Web アプリを作成しており、上部の div を固定位置にしています。これを行うと、div がページの残りの部分に重なっているように見えます。css ( position: relative; position: fixed) で 2 つの位置を使用しようとしましたが、これでは 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;
}

z-index-div にandも追加しました- 念のtop: 0ため。#top

Answer 3

2つのポジションがあるからです。1つを削除して、次のようにします。

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