javascript - 如何制作一个总是停留在浏览器页面的顶部？

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大于其他元素的值。里面的 div#navigation必须position: relative获得相同的行为。