Css 如何使内容出现在固定的 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>  

目前，我可以通过将菜单放在我的containerdiv中，使其显示在页面顶部并居中.但是，内容在菜单后面.我已经设定了clear: both;，但这没有帮助.