如何使<ul>始终坚持浏览器页面的顶部？</ul>

Question

我在页面顶部显示了<ul>，显示了导航项。目前它通过位置定位：绝对坚持到位。代码：

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

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

我想要做的是让此导航栏保持粘在屏幕顶部，而不受用户在页面下方滚动的影响。有点像这样的页面：

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

如何做到这一点？

Answer 1

将位置设为“固定”

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

Answer 2

使用top和left属性：

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

您还可以尝试设置fixed位置，并将z-index设置为大于其他元素的值。 <{1}}中的div必须为#navigation才能获得相同的行为。