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

我想让页面内容始终显示在导航栏下方，类似于此页面的工作方式：

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

您可以在内容中向下或向上滚动，但是导航栏永远不会消失。

为此，我使用position:fixed将导航栏固定在页面顶部。这可行，但是当我希望始终将内容推到导航栏下方时，我仍然可以上下滚动内容，使其在导航栏中“遍历”。

有关如何执行此操作的任何想法？这是我包含导航的<ul id='navigation'>的CSS代码：

#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;
}

这是<div id="container">的css，它显示在#navigation下面，并包含所有页面内容主体：

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

最佳答案

遇到这种情况的原因是，您没有为导航栏设置背景色。试试看

编辑：查看您的源代码。以此替换style.css文件中的导航CSS：

#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;
}

问题是z-index。将其置于999会将导航栏置于所有其他元素的顶部。

关于javascript - 如何始终使页面内容显示在导航栏下方？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14405276/