0

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

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">这是下面显示#navigation并包含所有页面内容主体的 css ：

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

4 回答 4

3

它通过的原因是因为您没有为导航栏设置背景颜色。试试看。

编辑：查看了您的源代码。将 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 会将导航栏置于所有其他元素之上。

于 2013-01-18T18:29:40.917 回答
1

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

于 2013-01-18T18:30:26.883 回答
1

几年前，我创建了具有相同功能的网站。我选择了 Server Side Includes，它工作得很好。我创建了一个导航链接的“页眉”和一个包含在每个页面上的“页脚”。

于 2013-01-18T18:32:41.457 回答
0

你试过添加data-role="header"吗？

<div data-role="header" data-position="fixed">
于 2013-01-18T18:35:24.347 回答