0

手短に言うと、ここに問題の例があります。

http://jsfiddle.net/2KTFG/1101/

最初の段落がヘッダーの後ろに消えているのを確認してください

html

<div id='header'>
    <div id="div_1">
        <p>hello</p>
    </div>
    <div id= "div_2">
        <p>hello</p>
    </div>
</div>
<div id='body'><p>why this goes behing previous div?</p>
    <p>why this goes behing previous div?</p>
    <p>why this goes behing previous div?</p>
</div>

CSS:

#header {
    position: fixed;
    top: 0px;
    height: 50px;
    width: 100%;
    background: green;
}
#div_1 {
       margin: 0 auto;
}

#div_2 {
    margin: 0 auto;
}
#body{ margin-top: 30px; height: 3000px; overflow: auto; }

前もって感謝します

4

3 に答える 3

0

何かの位置を与える:固定; その要素は、ブラウザ内のどこにでも固定されます。段落 div には位置スタイルがないため、ヘッダーはその上に配置されます。

各要素の位置を指定する場合: 相対; それらは互いに積み重ねられます。

#header {
    position: relative;
    top: 0px;
    height: 50px;
    width: 100%;
    background: green;}
#body{ height: 3000px; overflow: auto;position:relative; }

フィドルの例。

于 2013-11-08T23:32:04.153 に答える
0

本文の余白を 30 に設定し、ヘッダーの高さを 50px に設定したためです。

于 2013-11-08T22:37:37.667 に答える
0

#body (margin-top:30px)ヘッダーをクリアするには十分ではないためです。余白の値を増やして、最初の段落を押し下げます。

これが役立つことを願っています

于 2013-11-08T22:37:41.620 に答える