如何使内容显示在固定 DIV 元素下方？

我的目的是在页面顶部创建一个菜单，即使用户滚动，该菜单也保留在页面顶部（例如 Gmail 最近的功能，其中常用按钮随用户向下滚动，以便允许他们执行对消息进行操作而无需滚动到页面顶部）。

我还想将所述菜单下方的内容设置为显示在其下方 - 目前，它显示在其后面。

我的目标是这样的：

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

我希望顶部的菜单永远不会移动并且保留在页面顶部，即使用户向下滚动也是如此。我还希望当用户位于页面顶部时，主要内容从菜单下方开始，但是当用户向下滚动时，菜单是否超出内容顶部并不重要。

Summary:

• 我希望在页面顶部有一个固定位置的菜单，在滚动时跟随用户。
• Content must appear BELOW the menu ONLY when the user is at the top of the 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;
}

看我的例子here http://jsfiddle.net/Kyle_Sevenoaks/JZ42j/.

这是通过偏移导航 div 占用的空间来实现的，但正如它所具有的那样position: fixed;它已从文档流中删除。

实现此效果的首选方法是使用margin-top: 95px;/*your nav height*/在你的内容包装上。