[解決済み] 固定DIV要素の下にコンテンツを表示させるには？

質問

私の意図は、ユーザーがスクロールしてもページの上部に残る、ページの上部のメニューを作成することです (Gmail の最近の機能のように、よく使うボタンがユーザーと一緒にスクロールダウンし、ページの上部までスクロールしなくてもメッセージに対する操作を実行できるようにします)。

私はまた、前記メニューの下に表示されるコンテンツを設定したいと思います - 現在はメニューの後ろに表示されています。

私はこのようなものを目指しています。

+________________________+
|          MENU          | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
|     CONTENT BEGINS     |
|          HERE          |
|                        |
|                        |
|                        |
|                        |
|                        |
|                        |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+   <--- Bottom of page.

私は、ユーザーが下にスクロールしても、決して動かず、ページの一番上に留まる上部のメニューを持つことを希望します。 また、ユーザーがページの最上部にいるときは、メイン コンテンツがメニューの下から始まり、ユーザーが下にスクロールするときは、メニューがコンテンツの上を越えても問題ないようにしたいと考えています。

要約します。

• ページ上部に固定位置のメニューを表示し、スクロールしてもユーザーに追従するようにしたい。
• ユーザーがページの最上部にいるときだけ、コンテンツがメニューの下に表示されなければなりません。
  • ユーザーが下にスクロールするとき、メニューはコンテンツと重なってもかまいません。

誰かこれを達成する方法を説明してください。

ありがとうございます。

UPDATEです。

CSSコードです。

#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}

HTMLのコードです。

<div id="floatingMenu">
    <a href="http://www.google.com">Test 1</a>
    <a href="http://www.google.com">Test 2</a>
    <a href="http://www.google.com">Test 3</a>
</div>  

現時点では、メニューを container div . しかし、コンテンツはメニューの後ろに回ります。 私は clear: both; を設定しましたが、これは役に立ちませんでした。

どのように解決するのですか？

あなたが必要とするものは、余分なスペーシングのdivです（私があなたの質問を理解する限り）。

この div はメニューとコンテンツの間に配置され、パディングを含めてメニュー div と同じ高さになります。

HTML

<div id="fixed-menu">
    Navigation options or whatever.
</div>
<div class="spacer">
    &nbsp;
</div>
<div id="content">
    Content.
</div>

CSS

#fixed-menu
{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #f00;
    padding: 10px;
}

.spacer
{
    width: 100%;
    height: 95px;
}

私の例を参照してください。 はこちら .

これは、nav div が占めるはずのスペースを相殺することで機能しますが、nav div には position: fixed; になっているため、ドキュメントフローから外れています。

この効果を得るために好ましい方法は margin-top: 95px;/*your nav height*/ を使用することです。