如何始终使页面内容显示在导航栏下方？

Question

I want to keep the content of my page to always appear beneath the navigation bar, similar to how this page works:

http://www.google.com/intl/en/enterprise/apps/business/products.html#calendar

You can scroll down or up in the content, but the navigation bar never goes away.

For this purpose, I've used position:fixed to fix the navigation bar to the top of the page. This works, but I'm still able to scroll the content up and down, causing it to run 'through' and over the navigation bar, when I want the content to always be pushed below the navigation bar.

Any ideas on how to do this? Here's my css code for the <ul id='navigation'> containing the navigation:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
}

#navigation li
{
    display: inline-block; 
    width: 150px;
    height: 110px;
    cursor: pointer;
}

And here's the css for the <div id="container"> which appears below #navigation and holds all of the page content body:

#container
{
    position: absolute;
    margin-top: 180px;
    font-size: 25px;
    width: 90%;
}

Answer 1

The reason it's going through is because you didn't set a background color to your navigation bar. Try that.

Edit: Looked at your source code. Replace navigation CSS in style.css file with this:

#navigation
{
    text-align: center; 
    position: fixed; 
    float: left;    
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
    list-style-type: none;
    background-color: #FFFFFF;
    z-index:999;
}

The problem was the z-index. Putting it at 999 puts the navigation bar on top of all other elements.

Answer 2

您可以使用属性z-index：xxx，您尝试过吗？

Answer 3

Years ago created my site with that same functionality. I opted for Server Side Includes and it works great. I created a 'header' the navigation links and a 'footer' that gets included on each page.

Answer 4

您是否尝试添加data-role="header" ？

<div data-role="header" data-position="fixed">